|
|
html部分代码：
|
<p class="container"> <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> </p> |
javascript部分代码：当鼠标经过时，给li添加class="current"类，鼠标离开时，去除该类，达到改变背景色的目的！
|
window.onload = function() { var user_name = document.getElementById("user_name"); changeBgc(); } function changeBgc() { 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部分代码：
|
* { padding:0px; margin:0px; } .container { width:960px; margin:20px auto; } ul li { padding:5px 0; background-color:blue; margin:8px 0; color:#FFFFFF; } ul li.current { background-color:red; cursor:pointer; } |