Subscribe to 无限摄影News FeedSubscribe to 无限摄影Comments

ie6 :hover bug

五月 31, 2009 by zhanbin  
分类：web标准

1 评论

ie6 的 :hover bug很多blog都有介绍，普遍的说法是 给 :hover 定一个 display:block； 这其实只是一个方面。 其实 a内部嵌套的元素的css 属性也会影响 :hover 的触发。例如: position。

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="pos6">
<div class="pos posL"><a href="#">
<div></div>
 
<img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div>
<div class="pos posR"><a href="#">
<div></div>
 
<img src="../../images/app_photo/photo3.gif" alt="" class="pic" /></a></div>
 
    </div>
 
    
 
.pos6 .pos a:hover{ display:block; border:none; width:116px; overflow:hidden;}
.pos6 .pos{ width:116px; display:block; position:absolute;}
.pos6 .posL{ top:0; left:0;}
.pos6 .posR{ top:0; right:0;}
.pos6 .pos a .pic{ display: none;}
.pos6 .pos a:hover .pic{ display: block; width:80px; width:80px; float:right; border:solid 1px #ccc;}
.pos6 .posR a:hover .pic{ display: block; margin-left:0; float: left}
.pos6 .pos a div{ background: url(../../images/app_photo/btn.gif) no-repeat left top; width:19px; height:55px; float:left; cursor:pointer; *cursor:hand;}
.pos6 .posR a div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px top; float:right;}
.pos6 .pos a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat left -50px; width:19px; height:55px; float:left;}
.pos6 .posR a:hover div{ background: url(../../images/app_photo/btn.gif) no-repeat -48px -50px; float:right;}


当 img的css属性中有positon 时， 图片在:hover 的时候不会显示的。

标签： , ,