JavaScript study notes (2) Code to change the background color of the div block when the mouse passes over_Basic knowledge

HTML part of the code:

Copy code The code is as follows:

< ;li>Change the background color when the mouse passes over

• Change the background color when the mouse passes over


• Change the background color when the mouse passes over


• Change the background color when the mouse passes over

Javascript part of the code:
When the mouse passes over, add li class="current" class, when the mouse leaves, remove this class to achieve the purpose of changing the background color

Copy the code The code is as follows:

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 part code:

Copy code The code is as follows:

ul li.current {
background-color:red;
cursor:pointer;
}

The above code is mainly to facilitate everyone to know more about js. A css-implemented version is provided below.

<style type="text/css"> ul li:hover { background-color:red; cursor:pointer; } </style> <ul> <li>Change the background color when the mouse passes over it</li> <li>Change the background color when the mouse passes over it</li> <li>Change the background color when the mouse passes over it</li> <li>Change the background color when the mouse passes over it</li> </ul>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]