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

鼠标滑过时更换图片的效果有很多方法可以实现，在本文将为大家介绍喜爱如何通过css来实现。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS实现鼠标移动到图片，更换图片---www.jbxue.com</title> 
</head> 
<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(/jscss/demoimg/wall_s1.jpg);}/*链接、点击后*/ 
.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}/*鼠标经过*/ 
.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}/*点击时*/ 
</style> 
<body> 
<div class="nav"> 
<ul> 
<li><a href="#"></a></li> 
<li><a href="#"></a></li> 
<li><a href="#"></a></li> 
</ul> 
</div> 
</body> 
</html>