要实现一个需求,当鼠标悬浮在 li 元素上,li 元素背景变成红色,离开时,去掉背景。
<ul id="ul">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
window.onload = function() {
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
this.style.background = 'red';
};
aLi[i].onmouseout = function() {
this.style.background = '';
};
}
};
我们循环遍历每一个 li 元素,并为之加上 mouserover 和 mouseout 事件。
这只适用于 li 元素特别少的情况,如果 li 元素特别多,定会引起性能问题。