这篇文章主要介绍了关于ie中伪类hover的使用及bug，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
ie中伪类hover的使用及bug ，需要的朋友可以参考下。
伪类: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>
提示：您可以先修改部分代码再运行
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
ie下模拟css3中box-shadow的效果
以上就是关于ie中伪类hover的使用及bug的详细内容。