分析IE6中a:hover的bug

loading...  

如圖,在制作数码科技热卖排名的网页页面时,每个手机上的照片全是固定不动的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= 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 这些。我还在数码科技商品热销榜网页页面便是挑选了应用border:none。更详尽的信息内容请参照:

IE Pure CSS Pop Ups Bug IE中伪类:hover的应用及BUG

此外,根据阅读文章 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特性也除掉了。