IE中伪类hover的使用及BUG

weixin_30849403

于 2009-11-12 13:25:00 发布

阅读量75

点赞数

原文链接：http://www.cnblogs.com/guangrou/archive/2009/11/12/1601726.html

版权

伪类:hover的规则：

在CSS1中，此伪类仅可用于a对象。且对于无href属性的a对象，此伪类不发生作用；
在CSS2中，此伪类可以应用于任何对象；

目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7以及Firefox支持CSS2中的:hover。

先用CSS2的写法来实现：

< html >
< head >
< style >
* { margin : 0 ; padding : 0 ; }
ul { list-style : none ; margin : 100px ; }
li { height : 100px ; width : 100px ; background : #000 ; font-size : 12px ; color : #fff ; position : relative ; }
li a { display : none ; }
li:hover a { display : block ; text-decoration : none ; width : 100px ; height : 100px ; background : #c00 ; position : absolute ; top : 50px ; left : 50px ; color : #fff ; }
</ style >
</ head >
< body >
< ul >
< li > 鼠标移过来触发我吧！ < a href ="#" title ="" > 哈哈，终于被你发现了！ </ a ></ li >
</ ul >
</ body >
</ html >

大家可以测试发现在Firefox等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。

下面让我们换一种思维，使用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，而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。

CSS1的写法最终效果：

< html >
< head >
< style >
* { margin : 0 ; padding : 0 ; }
ul { list-style : none ; margin : 100px ; }
li { height : 100px ; width : 100px ; background : #000 ; font-size : 12px ; }
li a { display : block ; height : 100px ; width : 100px ; position : relative ; color : #fff ; text-decoration : none ; }
li a:hover { background : #ccc ; }
li span { display : none ; }
li a:hover span { display : block ; width : 100px ; height : 100px ; background : #c00 ; position : absolute ; top : 50px ; left : 50px ; color : #fff ; }
</ style >
</ head >
< body >
< ul >
< li >< a href ="#" title ="" > 鼠标移过来触发我吧！ < span > 哈哈，终于被你发现 </ span ></ a ></ li >
</ ul >
</ body >
</ html >

最少代码实现版(xugang实现)：

< html >
< head >
< style >
li { height : 10px ; width : 120px ; background : #000 ; }
li a { height : 10px ; width : 120px ; display : block ; }
li a:hover { background : #ccc ; }
li span { display : none ; }
li a:hover span { display : block ; width : 100px ; height : 40px ; background : #c00 ; position : absolute ; top : 15px ; left : 180px ; }
</ style >

</ head >
< body >
< ul >
    < li >
       < a href ="#" title ="" > 鼠标移过来触发
          < span >
             < ul >
               < li > aaa </ li >
               < li > aaa </ li >
             </ ul >
          </ span >
       </ a >
    </ li >
</ ul >
</ body >
</ html >

参考来源：http://www.planabc.net/2007/02/15/ie_hover_bug/

转载于:https://www.cnblogs.com/guangrou/archive/2009/11/12/1601726.html