首页 > 游戏装备 > 硬件update > 硬件updateDIY > 正文

伪类: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下却也不能触发显示,奇怪,奇怪,真奇怪……是不是依旧是一头雾水……没关系,继续往下实验,或许归类了我们就能发现规律了!