关于CSS的LI列表的背景变色功能_IT百科

题目有点简单，不清楚具体问题是什么。

下面写了一下关于鼠标移入移出，li变色的例子，仅供参考。

思路：当鼠标移入时，修改li的背景色，直接用background修改就可以。

鼠标移出时，恢复原来li的背景色。

<body>

</ul>

</body>

var oUl = document.getElementById('ul')

var aLi = oUl.children

for(var i=0i<aLi.lengthi++){

aLi[i].onmouseover = function(){

this.style.background = 'red'

}

aLi[i].onmouseout = function(){

this.style.background = ''

}

</script>

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

li {height: 50pxbackground: url(small3.png)} li:hover {background: url(small2.png)}

3、浏览器运行index.html页面，此时显示出了背景图片。

4、将鼠标移动到li标签背景图片上方，此时背景图片被改变了。

欢迎分享，转载请注明来源：内存溢出

关于CSS的LI列表的背景变色功能