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

　　鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现.qOH七七世界-网站建设|UI设计|人资系统|二次开发

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>qOH七七世界-网站建设|UI设计|人资系统|二次开发

　　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>qOH七七世界-网站建设|UI设计|人资系统|二次开发

　　PS:鼠标滑过背景图改变，也可以是背景颜色改变，无非就是利用a标签的hover属性和link属性，此时要熟练掌握a 的四个特殊属性。qOH七七世界-网站建设|UI设计|人资系统|二次开发