Some HTML code:
Copy codeThe Code is as follows:
<Ul>
<Li> the background color is changed when the mouse passes. </li>
<Li> the background color is changed when the mouse passes. </li>
<Li> the background color is changed when the mouse passes. </li>
<Li> the background color is changed when the mouse passes. </li>
</Ul>
Javascript code:
When the mouse passes, add the class = "current" to li. When the mouse leaves, remove the class to change the background color.
Copy codeThe Code is as follows:
Window. onload = function (){
Var lis = document. getElementsByTagName ("li ");
For (var I = 0; I <lis. length; I ++ ){
Lis [I]. onmouseover = function (){
This. setAttribute ("class", "current ");
}
Lis [I]. onmouseout = function (){
This. setAttribute ("class ","");
}
}
}
Part of the css code:
Copy codeThe Code is as follows:
Ul li. current {
Background-color: red;
Cursor: pointer;
}
The code above is mainly to help you know more about js. The following is a version of css implementation.
<Style type = "text/css"> ul li: hover {background-color: red; cursor: pointer ;} </style> <ul> <li> change the background color when the mouse passes </li> <li> change the background color when the mouse passes </li> <li> the background color is changed when the mouse passes. </li> </ul>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]