IE6中hover的bug
2012-12-26 14:43
197 查看
这是一段数码产品的hover显示代码,当鼠标划过时,图片有被放大的视觉效果
.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 …… 等等。
另外,通过阅读 position:relative/absolute无法冲破的等级,发现CSS还有改进的空间,改动后如下:
.DigitalImage a:hover { position: relative; } .DigitalImage a img { position: static; width: 80px; height: 60px; border: none; } .DigitalImage a:hover img { position: absolute; width: 160px; height: 120px; border: 1px solid #CCC; left: -40px; top: -30px; }
改动的原理就是去掉了a样式定义,直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性),另外也避免了 position:relative/absolute无法冲破的等级 一文中提到的z-index的问题,所以你会发现改进后的样式中,z-index属性也去掉了。
.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 …… 等等。
另外,通过阅读 position:relative/absolute无法冲破的等级,发现CSS还有改进的空间,改动后如下:
.DigitalImage a:hover { position: relative; } .DigitalImage a img { position: static; width: 80px; height: 60px; border: none; } .DigitalImage a:hover img { position: absolute; width: 160px; height: 120px; border: 1px solid #CCC; left: -40px; top: -30px; }
改动的原理就是去掉了a样式定义,直接定义a:hover。这样即避免了IE6的hover的Bug(position也是一个触发显示的属性),另外也避免了 position:relative/absolute无法冲破的等级 一文中提到的z-index的问题,所以你会发现改进后的样式中,z-index属性也去掉了。
相关文章推荐
- ie6 hover 子元素无效bug
- a:hover在IE6中的BUG
- IE6 中 a:hover 的bug (转)
- IE6bug整理(hover a:hover) IE6 a:hover 无效
- 发现一个jquery的hover在ie6、7下的bug
- IE6 中 a:hover 的bug
- ie6 bug - hover 相关
- 【IE6的BUG一】链接伪类(:hover)CSS背景图片有闪动BUG
- IE6 下:hover 中bug解决了(纯CSS)
- IE6 的 hover 伪类 bug
- css伪类hover ie6bug,揭开IE6下hover不显示原因
- IE6下链接伪类(:hover)CSS背景图片有闪动BUG
- IE6下hover伪类显示隐藏子元素bug及解决方案
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- IE6中伪类:hover的使用及BUG
- ie6中[:hover] bug 解决方案一
- IE6中伪类hover的使用及BUG说明
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- IE中伪类:hover的使用及BUG,以及如何在IE6中进行修正(CSS)
- ie6不支持 形如a:hover span{} bug