伪类:hover的使用及BUG

hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：

在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象，此伪类不发生作用。

在CSS2中此伪类可以应用于任何对象。

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

当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。

或许这样讲太空洞，请看下面一个常见的触发显示的例子(仅选择IE6为例讲解)。

我们先用CSS2的写法来实现：

可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有(不信你找个高高手问问，他们依然会回答你，这代码完全正确)，难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……

对其属性我们仅设定width:100px;发现在IE6中依旧没有变化，我们尝试着更改width的 value ，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试(初始值为#fff)，更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

　　　　　　　　　　　　　 查看评论 回复