伪类: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="liehuo.net" title="">哈哈，终于被你发现了！</a></li>
</ul>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!
大家可以测试发现在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="liehuo.net" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!
最少代码实现版(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="liehuo.net" title="">鼠标移过来触发
<span>
<ul>
<li>aaa</li>
<li>aaa</li>
</ul>
</span>
</a>
</li>
</ul>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!
就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。
很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。
有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：
a:hover{color:#F00;}
<a href="?">鼠标经过时改变我的颜色</a>
是的，这将在所有的浏览器中都有效。但如果换成这样：
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
你会发现在IE6-下什么都没有发生，我们的样式失效了。对，就是这样，应该很多人都碰到过且已经解决了这个问题。
是的，只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
看着恢复了正常的效果，去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定，于是想会不会是因为haslayout。恩，很有可能就是这样。但你接着测试，会发现，不论你在a:hover{}写入任何属性，color啊，font-size啊，overflow啊（甚至是不存在的属性，如xx:yyy），都可以使之恢复正常。
测试到这里是不是有点目瞪口呆的感觉？对，我也是这样的。至于原因是什么，我还不知道，或许有人知道。
分享到：
相关推荐
本文详细阐述了在IE浏览器中使用CSS伪类:hover时的兼容性问题和相应的解决方案。首先介绍了伪类:hover在不同版本CSS标准中的使用规则。在CSS1中，:hover伪类仅限于a元素，并且要求该a元素拥有href属性。然而在CSS2中...
在探讨IE6中伪类:hover的使用及BUG说明时，我们首先需要了解什么是CSS伪类以及:hover伪类的作用。CSS伪类是一种用于定义元素的特殊状态的特殊选择器，比如链接在用户未进行交互前后的状态。伪类:hover用于定义当用户...
通过执行这个命令，可以强制IE6浏览器缓存:hover伪类中使用的背景图片至本地，从而避免了在鼠标悬停时重新向服务器请求背景图片。 具体实施时，可以在HTML页面的底部加入一段if IE6的条件判断，然后执行document....
- **解决方案**：避免在这些伪类中使用`!important`关键字。 ##### 18. **First-Letter失效问题** - **问题描述**：在IE6中，`:first-letter`伪类可能无法正常工作。 - **解决方案**：将`:first-letter`伪类尽可能...
csshover 相信做前端开发都知道，IE6、IE7都不支持:active伪类，IE6更甚，连:hover伪类都不支持。为了解决这个问题，一般都会引入一个csshover.htc文件来解决。 目前该文件版本为3.11， 如果你发现自己使用的不是...
"ie下没有背景色bug的解决方法"这一问题就是一个典型的例子，它涉及到CSS样式在IE中的渲染问题，尤其是背景色的显示。 在描述中提到的二级菜单问题，当用户鼠标悬停在菜单项上时，二级菜单在IE下会出现收缩现象。这...
此外，IE低版本对CSS选择器的支持也有局限，如：伪类`:hover`、`:first-child`在IE6中不起作用，需要使用JavaScript进行补偿。还有，IE6不支持CSS `display:none`，需要使用`visibility:hidden`代替。 布局方面，IE...
伪类和伪元素的兼容性问题：在IE7中，使用:hover伪类时，若背景颜色为#fff，则会失效。 d. PNG图片显示问题：IE6和IE7中，即使PNG图片的像素颜色值和背景色相同，显示的颜色可能会不同。可以通过PNGCrush等工具...
- F) `:before` 和 `:after` 伪元素：这两个伪元素在IE6中不可用，但IE7和IE8支持，不过需要通过`filter`属性的`progid:DXImageTransform.Microsoft.Shadow`等非标准方法来实现。 3. **属性支持** - IE6、7、8对...
- **问题描述**：在 IE6.0 及更低版本中，使用属性选择器（如 `p[id] {}` 或 `div[id] {}`）时存在 bug。 - **解决方案**： - 避免使用这种形式的选择器，或使用更具体的选择器，如 `p[id="someId"] {}`。 #### ...
ie7.js是一个由Dean Edwards开发的JavaScript库，它主要目的是让IE6和IE7支持一些CSS2.1及部分CSS3选择器，如类选择器（.class）、伪类（:hover、:focus等）和属性选择器（[attr=value]）。ie7.js通过动态创建DOM...
另外，IE6没有实现CSS2中的很多新特性，例如：伪类选择器（:hover, :active, :focus）只对链接生效，而对其他元素无效。再者，IE6的盒模型错误是著名的，它将边框和内填充算入元素宽度，与W3C标准不符，给布局带来很...
在IE浏览器中，我们经常会遇到一些奇怪的bug，今天我们就来讨论一个典型的IE死机bug，并探讨其解决方案。 标题分析 "一个IE死机bug"这个标题已经明确地表明了这个bug的严重性，IE死机bug是指IE浏览器在执行某些操作...
答案：可以使用 a:link、a:hover 等伪类来写出超链接的顺序或者初始样式中的链接方法。 3. 如何写出 XHTML 和 CSS 的注释？ 答案：在 HTML 中，可以使用 <!-- 注释内容 --> 语法来注释代码；在 CSS 中，可以使用 /* ...
在IE6中，只有 `a` 标签支持 CSS 的 `:hover` 伪类。利用这一点，可以控制 JavaScript 触发的小部件，并保持键盘可访问性。 **示例：** ```css a:hover { color: red; } ``` #### 七、使用 `!important` 或高级...
- **解决方法**：建议使用`event.target`，并在IE中使用`event.srcElement`作为备选方案。 #### 十三、body载入问题 - **问题描述**：在某些情况下，不同浏览器对`body`元素的加载顺序可能存在差异。 - **解决方法...
- 可以使用`:link`, `:visited`, `:hover`, `:active`伪类来添加不同的样式。 3. **链接(a标签)的边框与背景** - 可以通过设置`border`和`background-color`属性来控制链接的外观。 4. **ff不支持expression...