텍스트 상자 텍스트 상자는 마우스가 텍스트 상자 위로 지나갈 때 색상이 변경됩니다.특수 효과 형성

JS 파일:

코드 복사 코드는 다음과 같습니다.

function mouseAction( ) {
var textInputs = document.getElementsByTagName("input");
var len = textInputs.length;
var index = 0
/*
또한 for in 문을 사용하여
for (textInput in textInputs){
textInputs[textInput].onmouseover = functionName;
*/
for( index = 0; 인덱스 < len ; 인덱스 ) {
textInputs[index];
if( textInput.getAttribute("type") == "text" ){
textInput.onmouseover = 함수() {
// 이 방법을 사용할 수도 있습니다. this.style.BackgroundColor = "red";
this.className = "txtMouseOver"; //먼저 CSS 파일을 HTML에 삽입하세요.
} // 세미콜론을 추가하세요

textInput.onmouseout = function(){
this.className = "txtMouseOut"
};

textInput.onfocus = function(){
this.className = "txtMouseFocus"
};

textInput.onblur = function(){
this.className = "txtMouseBlur"
};
}
}

//괄호 없이 함수 이름 바로 뒤에 올 수도 있습니다. window.onload = mouseAction
window.onload = function(){
mouseAction; ();
} ;



CSS 파일:

코드 복사 코드는 다음과 같습니다./*본문이 중앙에 표시됩니다*/

body{

width: 80%
height: 800px; > 위치: 상대;
여백-왼쪽: 10% ;
/*왼쪽: -40%;*/
테두리: #00CCFF Solid Thin
.txtMouseOver
{
테두리 색상: #9ecc00;
}
.txtMouseOut
{
테두리 색상: #84a1bd;
.txtMouseFocus
{
테두리 색상: #9ecc00;
배경 색상: #e8f9ff;
}
.txtMouseBlur
{
테두리 색상: #84a1bd;
}