用css hover轻松搞定鼠标滑动变色效果
用css hover轻松搞定列表项鼠标滑动变色效果,
不用JavaScript,不用每一行定义式样,只需一行CSS代码,只要一行哦,亲!
当一个列表,在鼠标滑过当前行时,整个行的背景变色。这样的效果对提升用户体验有相当的好处。
大家做个效果时一般都用JavaScript配合CSS来实现的。
今天给大家介绍直接使用CSS的hover伪类来做出变色效果,不用JS代码。
hover一般用在链接的A标志上,其实它也可以用于li、tr、p等有block块属性的标志上。
代码非常简单
css代码:
#my li:hover{background-color:#F00;}
html代码:
<ul id="my">
<li> AAA</li>
<li> BBB</li>
<li> CCC</li>
<li> DDD</li>
</ul>
好了,现在当鼠标滑过其中一行,该行背景就会变成红色。
这种效果兼容IE、FF等浏览器,当然老不死的IE6除外。
大家可以扩展一下思路,把这个效果可以应用到很多场合去!