JavaScript Learning Notes (ii) when the mouse passes, change the background color of the DIV block Code _ Basics

HTML Section Code:

Copy Code code as follows:

<ul>
<li> change background color when mouse passes </li>
<li> change background color when mouse passes </li>
<li> change background color when mouse passes </li>
<li> change background color when mouse passes </li>
</ul>

JavaScript Part code:
When the mouse passes, add the class= "current" class to Li, remove the class when the mouse leaves, achieve the purpose of changing the background color

Copy Code code 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", "");
}
}
}

CSS Part code:

Copy Code code as follows:

UL Li.current {
background-color:red;
Cursor:pointer;
}

The above code, is mainly convenient for everyone to know more JS, the following provides a version of the implementation of CSS.

<style type= "Text/css" > ul li:hover {background-color:red; Cursor:pointer; </style> <ul> <li> Mouse changes background color </li> <li> when mouse over change background color </li> <li> when mouse over change background color </li> <li> Change background color when mouse passes </li> </ul>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]