之前，我们实现鼠标移动，图片切换的效果，大多使用js实现。但最近工作需要，发现用css直接实现也是不错的。

   说明：通过ul li span插入图片，一个span包含一个图片，一个图片隐藏，一个图片显示。通过li:hover,li:active,来切换2个图片的显示。因为项目中img是动态提取js生成的html，个数也不一定，这样子整体不固定，方便了框架的管理与灵活！

相关知识点：

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

http://www.cnblogs.com/xiaochaohuashengmi/archive/2010/09/06/1819624.html

  html：

<html>

<head>

   <title>css</title>

   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

   <link type="text/css" rel="stylesheet" href="try.css">

   <script type="text/javascript">

   

   </script>

</head>

<body bgcolor="#E0E0E0">

   <div class="toppic">

       <ul>

       <li class="active">

       <span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>

       <span  class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>

       </li>

       <li>

       <span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>

       <span  class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>

       </li>

       <li>

       <span class="jpgs"><img src="a.jpg" width="100" height="100"/></span>

       <span  class="jpgh"><img src="getqrcode.jpg" width="100" height="100"/></span>

       </li>

       </ul>

   </div>

</body>

</html>

  css:

.jpgh{

display:none;

}

.toppic ul li.active span.jpgh{

display:block;

}

.toppic ul li.active span.jpgs{

display:none;

}

.toppic ul li:hover span.jpgs{

display:none;

}




.toppic ul li:hover span.jpgh{

display:block;

}

附件是完成效果，示例不是很美观，只是体现了这个实现过程