ホームページ > 記事 > ウェブフロントエンド > JavaScript学習メモ(2) マウス通過時にdivブロックの背景色を変更するコード_基礎知識
JavaScript学習メモ(2) マウス通過時にdivブロックの背景色を変更するコード_基礎知識
- WBOYオリジナル
- 2016-05-16 18:08:051184ブラウズ
コードの HTML 部分:
コードをコピー コードは次のとおりです:
JavaScript部分コードの内容:
マウスが上を通過すると、li class="current" クラスを追加し、マウスが離れると、背景色を変更する目的を達成するためにこのクラスを削除します
コードをコピーします コードは次のとおりです: window.onload = function() {
var lis = document.getElementsByTagName(" li"); for (var i=0; ilis[i].onmouseover = function() {
this.setAttribute("class", "current ");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}
CSS パーツ コード:
this.setAttribute("class", "current ");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}
CSS パーツ コード:
コードをコピー コードは次のとおりです: ul li.current {
background-color:red; cursor:pointer;
}
上記のコードは主に、誰もが JS について詳しく知ることができるようにするためのものです。 CSS を実装したバージョンを以下に示します。
}
上記のコードは主に、誰もが JS について詳しく知ることができるようにするためのものです。 CSS を実装したバージョンを以下に示します。
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。