在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 >
#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 >点我吧<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 >点我吧<div>看到我了吧</div></div></a>

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

相关文章:

  • 2022-12-23
  • 2021-09-23
  • 2022-12-23
  • 2021-11-09
  • 2021-11-27
  • 2021-09-10
  • 2022-12-23
  • 2021-05-25
猜你喜欢
  • 2021-11-09
  • 2021-10-21
  • 2021-11-10
  • 2021-08-22
  • 2022-12-23
  • 2021-11-04
  • 2021-12-19
相关资源
相似解决方案