题目有点简单，不清楚具体问题是什么。
下面写了一下关于鼠标移入移出，li变色的例子，仅供参考。
思路：当鼠标移入时，修改li的背景色，直接用background修改就可以。
鼠标移出时，恢复原来li的背景色。
<body><ul id="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
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>
<style>*{ paddding:0 margin:0}
li{ list-style-type:none}
b{font-weight:normalpadding:0 10px}
p{line-height:30px}
</style>
<ul style="font-size:14px color:#eee">
<li>
<b style=" color:#f00 font-size:15px">姓名<b>
<span style="color:#f00 font-size:15px">奖品</span>
</li>
<li>
<p>
</p>
<p>
<b>岛封</b><span>海盗双人五日游</span>
</p>
</li>
<li>
<p>
<b>姓名</b><span>海盗双人五日游</span>
</p>
<p>
<b>岛封</b><span>海盗双人五日游</span>
</p>
</li>
<li>
<p>
<b>姓名</b><span>海盗双人五日游</span>
</p>
<p>
<b>岛封</b><span>海盗双人五日游</span>
</p>
</li>
<li>
<p>
<b>姓名</b><span>海盗双人五日游</span>
</p>
<p>
<b>岛封</b><span>海盗双人五日游</span>
</p>
</li>
<li>
<p>
<b>姓名</b><span>海盗双人五日游</span>
</p>
<p>
<b>岛封</b><span>海盗双人五日游</span>
</p>
</li>
</ul>
结论：
不能直接修改CSS样式改变颜色，但可以通过<span></span>的背景图像来实现
代码：
效果：
原理：
通过设置<li>下<span>的背景图像来实现小红圆点的效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）