css鼠标悬停时，换图片
ul,li{ padding:0; margin:0; overflow:hidden;}
li{ list-style:none;}
img{ border:0;}
.box{ width:950px;}
.box li{ float:left; width:300px; height:250px; margin-right:10px; margin-bottom:20px;}
#box_img1 {width: 300px;
height: 250px;background-image: url('support.png');}
#box_img1 a:hover {width: 300px;
height: 250px;background-image:url('GotJobButton.png');}
#box_img2 {width: 300px;
height: 250px;background-image: url('support.png');}
#box_img2 a:hover {width: 300px;
height: 250px;background-image:url('object.png');}
</style>
<ul class="box">
<li id="box_img1"><a href="features/businesses"></a></li>
<li id="box_img2"><a href="features/nonprofits"></a></li>
</ul>
问题：
想实现鼠标在上面悬停时，换图片，好像不行，是怎么回事？ 展开
1首先输入代码下方的代码：
<!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实现鼠标移动到图片，更换图片</title>
2、然后输入下方的代码：
</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;
3、然后在输入下方的代码：
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>
4、然后这样就完成了。
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div id="aaaa"><ul>，<li><img src="lanren01.jpg" width="218" height="155" /><h2>成都康定理塘稻城亚丁然后说再见</h2></li>。
4、书写css代码。<style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}body{ background:#000;}；#aaaa{ width:460px; height:auto; margin:150px auto; overflow:hidden;}。
5、书写并添加js代码。<script src="jquery.min.js"></script><script>$(function(){var imgs = $('#aaaa li');
6、代码整体结构。
使用CSS :hover 伪类可以达到这个效果。
定义和用法
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示：:hover 选择器可用于所有元素，不只是链接。
提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。
注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。
实例
.div1{background-image:url('image/1.jsp');}
.div1:hover{background-image:url('image/2.jsp');}
/*当鼠标悬浮到div上方是，改变div背景图片*/
接下来，你看一下我的：
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{padding:0; margin:0; overflow:hidden;}
li{list-style:none;}
img{border:0;}
.box{width:950px;}
.box li{width:300px; height:250px; margin-right:10px; margin-bottom:40px;}
#box_img1{width:300px; height:250px; background-image:url('https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/ad08536d696c6569736d796e616d653b2e.jpg');}
#box_img1 a:hover{width:300px; height:250px; background-image:url('https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/avarta/66/r6s2g2.gif');}
#box_img2 {width:300px; height:250px; background-image:url('https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/ad08536d696c6569736d796e616d653b2e.jpg');}
#box_img2 a:hover{width:300px; height:250px;background-image:url('https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/avarta/66/r6s2g2.gif');}
a{display:inline-block; width:300px; height:250px;}
</style>
</head>
<body>
<ul class="box">
<li id="box_img1"><a href="features/businesses">我的背景变化了吗？</a></li>
<li id="box_img2"><a href="features/nonprofits">变不变呢额(⊙o⊙)…</a></li>
</ul>
</body>
</html>
这样就好了，呵呵O(∩_∩)O~
换成#box_img1:hover
img2类似
