:hover在IE6的使用

在IE7+及FF浏览器中，:hover伪类可以用于任何对象，但在IE5、IE6中，:hover伪类仅能用于a（超链接）对象，且该a对象必须要拥有href属性。

下面是一个鼠标悬停弹出层的代码：

--------------------------------------

<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}
#a:hover div

{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5

0px;}
</style>

<div id="a">点我吧<div>看到我了吧</div></div>

------------------------------------------

但此代码仅在IE7+及FF浏览器中有效，在IE5及IE6中无效，要使在IE5及IE6中也有效，则必须在外面包裹一个a标签，代码如下：

----------------------------------

<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}
a:hover #a div

{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5

0px;}
</style>

<a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>

---------------------------------------------------

但此时发现在IE5、IE6下仍然无效，原因是a:hover中的css属性必须要相对以前有所改变才能触发hover事件。例如可以增加一个a:hover{zoom:1}属性，

我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

修正后的代码：

----------------------------------

<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}

a:hover{zoom:1}  //增添的为了触发hover的属性
a:hover #a div

{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5

0px;}
</style>

<a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>

 

 

 

 

http://www.cnblogs.com/2050/archive/2010/07/01/1769431.html