IE中伪类hover的应用及BUG

2020-10-26 20:36 jianzhan
伪类:hover的标准:
在CSS1中,此伪类仅能用于a目标。且针对无href特性的a目标,此伪类不产生功效;
在CSS2中,此伪类能够运用于任何目标;
现阶段IE5.5、IE6仅适用CSS1中的:hover,但是新出的IE7和Firefox适用CSS2中的:hover。
先用CSS2的写法来完成:

提醒:您能够先改动一部分编码再运作

大伙儿能够检测发如今Firefox等对CSS2适用很好的访问器中,能够显示信息大家所要做到的实际效果,但在IE6中却没法完成。
下面让大家换1种逻辑思维,应用CSS1的写法看来看:
在CSS1中,因为没法适用li元素:hover的应用,因此把文本包括到a中,对a应用:hover,而且即将显示信息掩藏的一部分放到span元素中;
CSS中大家将a的设定成块级元素,并使a的尺寸和宽度和li的同样;
并设定a为相对性部位,用a来仿真模拟上例中的li;
而用span来仿真模拟上例中的a,设定span在默认设置状况下掩藏(display:none;);
当a被开启时(:hover),则span显示信息(display:block;);
但,假如依照以上方法改动后,示例的实际效果,在IE6中仍然没法显示信息。
缘故是:IE访问器本身分析的难题,是IE5.5和IE6中伪类:hover的BUG。
怎样处理这个难题呢?
这个BUG能够根据在连接的特性中提升一些独特的CSS特性申明来清除。
li a:hover {}
对其特性大家仅设置width:100px;发如今IE6中依然沒有转变,大家尝试着变更width的value,例如使其width:99px,怪异的事儿产生了,在IE6中,掩藏的一部分在开启的情况下显示信息出来了。大家再对li a:hover的特性仅设置color来检测(原始值为#fff),变更color值,发如今IE6下却也不可以开启显示信息。。。
最终总结发现,除text-decoration,color,z-index不可以开启显示信息(针对不可以开启显示信息的一部分,能够也有一些忽略的特性)外,别的特性都可以作为清除伪类:hover BUG的特殊特性。
表明:
1、不提议更改display值来作为特殊特性清除此BUG,并且在一些事例中此特性不1定能清除BUG。
2、针对作为特殊特性的border和background中的色调大家还能用全写和简写来更改,如#fff和#ffffff在清除BUG中分析为2个不一样的值。
CSS1的写法最后实际效果:

提醒:您能够先改动一部分编码再运作

至少编码完成版(xugang完成):

提醒:您能够先改动一部分编码再运作