CSS控制当鼠标滑过时更换图片的效果

2014-04-08

　　鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现.

CSS代码如下:
　　<style type="text/css">
　　*{ margin:0; padding:0;}
　　ul li{ list-style:none;}
　　.nav{ width:800px; height:40px; margin:150px auto;}
　　.nav ul li{ float:left; width:200px;}
　　.nav ul li a:link,a:visited{ display:block; width:190px; height:40px;
　　　　　　　　background: url(20140616095027.jpg);}/*链接、点击后*/
　　.nav ul li a:hover{background: url(20140616095028.jpg);}/*鼠标经过*/
　　.nav ul li a:active{background: url(20140616101821.jpg);}/*点击时*/
　　</style>

　　HTML代码如下：
　　<div class="nav">
　　<ul>
　　<li><a href="#">七七世界li1</a></li>
　　<li><a href="#">七七世界li2</a></li>
　　<li><a href="#">七七世界li3</a></li>
　　</ul>
　　</div>

　　PS:鼠标滑过背景图改变，也可以是背景颜色改变，无非就是利用a标签的hover属性和link属性，此时要熟练掌握a 的四个特殊属性。

本文关键词：CSS控制当鼠标滑过时更换图片的效果鼠标效果方法图片控制