Question

css a:hover问题

#mainnav{ width:1002px;height:40px;border:none; float:left;margin:-56px auto 30px auto;}
#mainnav ul li{border:none; float:left;border:0 none;}
#mainnav ul{ list-style-type:none; float:left; width:960px; }
.mainnav1 a:hover{ background:url(../images/shouye1.gif); width:90px; height:40px;}

<div id="mainnav">
<ul>
<li class="mainnav1"><a href="*"><img border="0" src="images/shouye.gif" width="90" height="40" /></a></li>
<li class="mainnav2"><a href="*"><img border="0" src="images/bowen.gif" width="90" height="40" /></a></li>
<li class="mainnav3"><a href="*"><img border="0" src="images/tupian.gif" width="90" height="40" /></a></li>
<li class="mainnav4"><a href="*"><img border="0" src="images/guanyu.gif" width="116" height="40" /></a></li>
<li class="mainnav5"><a href="*"><img border="0" src="images/liuyan.gif" width="108" height="40" /></a></li>
</ul>
</div>

直接覆盖原来的图片，现在只能显示一点

Answer 1

你在做导航对吧，你这样是替换不了图片的，a:hover你更改的只是他的背景
但是你原先显示的是<img>标签，图片是肯定在背景之上的你得改成
#mainnav{ width:1002px;height:40px;border:none; float:left;margin:-56px auto 30px auto;}
#mainnav ul li{border:none; float:left;border:0 none;}
#mainnav ul{ list-style-type:none; float:left; width:960px; }
.mainnav1 a{background:url(../images/shouye.gif);width:90px;height:40px;display:inline-block;}
.mainnav1 a:hover{ background:url(../images/shouye1.gif);}
<div id="mainnav">
<ul>
<li class="mainnav1"><a href="*"></a></li>
<li class="mainnav2"><a href="*"></a></li>
<li class="mainnav3"><a href="*"></a></li>
<li class="mainnav4"><a href="*"></a></li>
<li class="mainnav5"><a href="*"></a></li>
</ul>
</div>
你试下

Answer 2

这样是覆盖不了的，你用样式表控制的是背景图片，背景图片怎么能覆盖img图片呢，如果想达到你需要的效果那就把img删掉，也用css显示第一张图片，不过建议这个效果使用js实现，因为有的浏览器是不能支持以上代码的