Question

有关叠加图片鼠标经过时显示另一张图片，不用事件，用纯DIV+CSS布局的问题

.a1{
position:absolute;
width:117px;
height:87px;
visibility:hidden;
}
ul li a .a1:hover{
cursor:hand;
z-index:+1;
visibility:visible;

}
ul{list-style:none;}
<ul>
<li><a><img src="images/m1-act.gif" class="a1" /></a><span><img src="images/m1.gif" width="117" height="87" /></span></li>
</ul>
浏览器支持CSS2.0，先不说效果,鼠标经过时连手形都没有出现，难道我的引用有问题

Answer 1

有好几处错误：
1.超链接要这么写：<a href="#">><img src="images/m1-act.gif" class="a1" /></a>
2.鼠标经过: ul li a:hover{.......}
3.你既然把图片隐藏掉了，鼠标经过图片肯定不会触发hover
或许你可以这样修改一下：
<style type="text/css">
ul li a:hover{
cursor:hand;
display:none;
}
ul{list-style:none;}
</style>
<ul>
<li><a href="#"><img src=="images/m1.gif" style="position:absolute;width:117px;height:87px" /></a>
<img src="images/m1-act.gif" width="117" height="87" />
</li>
</ul>

Answer 2

hand不是cursor的标准属性. ie下是可以,但是FF就不支持.
标准应该是cursor:pointer;
第一样图片已经隐藏了 鼠标怎么放得上去呢

#zhong:hover{cursor:pointer; }
.cs1{ visibility:hidden;}
#zhong:hover #sf{visibility:visible; }
#zhong:hover .cs2{visibility:hidden; }

<div id="zhong" >
<a><img id="sf" class="cs1" src="images/m1-act.gif" width="78" height="20" /></a>
<a><img src="img src="images/m1.gif" width="78" height="20" /></a>
</div>

注意样式这个#zhong:hover #sf{visibility:visible; }的优先级比这个.cs1{ visibility:hidden;}高
如果你这样写的话是没效果的
.#sf{ visibility:hidden;}
#zhong:hover cs1{visibility:visible; }

Answer 3

建议用jquery的hover方法，不必钻牛角尖非得要用css实现

Answer 4

用伪类 A：hover

Answer 5

用JS效果也可以实现