テキストボックス マウスが上を通過するとテキストボックスの色が変わります_フォームの特殊効果

JS ファイル:

コードをコピー コードは次のとおりです:

function MouseAction( ) {
var textInputs = document.getElementsByTagName("input");
var len = textInputs.length;
var textInput; 🎜>for in ステートメントを使用して、
for (textInput in textInputs){
textInputs[textInput].onmouseover = functionName;
}
*/
for(index = 0; インデックス < レン ; インデックス ) {
textInput = textInputs[index];
if( textInput.getAttribute("type") == "text" ){
textInput.onmouseover = function () {
// このメソッドも使用できます 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 実線
}
.txtMouseOver
{
ボーダーカラー: #9ecc00;
}
.txtMouseOut
{
ボーダーカラー: #84a1bd;
.txtMouseFocus
{
境界線の色: #9ecc00;
背景色: #e8f9ff;
.txtMouseBlur
{
背景色: #ffffff;
}