IE6 中 a:hover 的bug
2011-08-24 14:20
162 查看
如上图,在制作数码热销排行的页面时,每种手机的图片都是固定的160×120大小,但是出于页面美观及内容可读性的考虑,在列表页上图片都压缩为原大小
的50%显示;也就是80×60像素大小。不过当用户将鼠标移动到缩略图上时,我们会按原图大小显示出来。类似的效果在抓虾上也被应用在显示用户头像上:
抓虾使用的技术是利用一个隐藏的浮动层,每张缩略图上注册mouseover事件,当鼠标移动到缩略图上时,设置浮动层中img元素的src属性为头像的图片URL,然后通过JavaScript计算绝对定位,将放大后的头像显示在缩略图上。
事实上,如果图片显示的大小已经固定的话,不需要JavaScript,只需要纯CSS就可以实现类似的效果。如在数码产品热销排行页中,CSS的定义大致如下:
.DigitalImage a { position: relative; } .DigitalImage a:hover { position: relative; z-index: 1; border: none; } .DigitalImage a img { position: static; width: 80px; height: 60px; border: none; } .DigitalImage a:hover img { position: absolute; z-index: 2; width: 160px; height: 120px; border: 1px solid #CCC; left: -40px; top: -30px; }
原理很简单,设置a元素的position属性为relative,图片最开始显示为50%大小,使用默认定位;当:hover被触发的时候,图片
更改为绝对定位,同时显示为原图大小,为了使效果看起来像是对称的盖在缩略图上,同时设置top和left为缩略图的宽高的一半的负数。
以上CSS中比较让人费解的大概就是粗斜显示的 border:none 一句。这看似一个毫无意义的效果,可是如果没有这一句的话,在IE6中就无法触发hover。
以前未曾遇到类似的问题,一番google,才知道这是IE6处理CSS伪类:hover的Bug。例如如下的代码:
<style> a {} a span {color: green;} a:hover {} a:hover span {color: red; } </style> <a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>
在IE7/FF中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6则无反应。所以IE6的bug就是如果a 与 a:hover
的css定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如
a:hover{border:none;}
或者
a:hover{padding:0;}
再或者
a:hover{background: none;}
此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。
相关文章推荐
- IE6下hover伪类显示隐藏子元素bug及解决方案
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- IE6中伪类:hover的使用及BUG
- IE6中hover的bug
- ie6中[:hover] bug 解决方案一
- IE6中伪类hover的使用及BUG说明
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- IE中伪类:hover的使用及BUG,以及如何在IE6中进行修正(CSS)
- IE6 中 a:hover 的bug
- ie6不支持 形如a:hover span{} bug
- IE6不支持非A元素:hover伪类的bug的处理
- IE6 中 a:hover 的bug (转)
- IE6bug整理(hover a:hover) IE6 a:hover 无效
- a:hover在IE6中的BUG
- ie6 hover 子元素无效bug
- ie6 bug - hover 相关
- 发现一个jquery的hover在ie6、7下的bug
- 【IE6的BUG一】链接伪类(:hover)CSS背景图片有闪动BUG
- IE6 下:hover 中bug解决了(纯CSS)
- IE6 的 hover 伪类 bug