CSS伪类:hover 在IE中使用及其BUG

原创 2007年10月08日 10:53:00
  伪类: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的写法来实现:
XHTML部分:
<ul>
<li>鼠标移过来触发我吧!<a href="#" title="">哈哈,终于被你发现了!</a></li>
</ul>
CSS部分:
* {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;}
查看效果:
Source Code to Run [www.fun52.com]
css
ul {list-style:none;}
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;}
使用CSS2做出的效果
鼠标移过来触发我吧!哈哈,终于被你发现了!

   [ 可先修改部分代码 再运行查看效果 ]
  大家可以测试发现在FF等对CSS2支持很好的浏览器中,可以显示我们所要达到的效果,但在IE6中却无法实现。

  下面让我们换一种思维,所用CSS1的写法来看看,这个时候由于无法支持li元素:hover的使用,我们只好把所有文字包含到a中,对a使用:hover,并且将要显示隐藏的部分放到span元素中,首先我们对XHTML进行部分调整,调整如下:
XHTML部分:
<ul>
<li><a href="#" title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li>
</ul>
  CSS中我们将a的设置成块级元素,并使a的大小和宽度和li的相同,并设置a为相对位置,用a来模拟上例中的li;而用span来模拟上例中的a,设置span在默认情况下隐藏(display:none;),当a被触发时(:hover),则span显示(display:block;)
CSS部分:
* {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 span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }
查看效果:
Source Code to Run [www.fun52.com]
css
ul {list-style:none;}
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 span {display:none;}
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }
使用CSS1做出的效果(有BUG)
鼠标移过来触发我吧!哈哈,终于被你发现

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

  那到底是什么问题呢?
  不是标准说明的错,也不是IE浏览器不支持CSS1,而是IE浏览器自身解析的问题,是IE5.5和IE6中伪类:hover的BUG。
  那又该如何解决这个问题呢?
  这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。
  下面我们对上面的第二个例子进行实验,究竟哪些属性可以帮我们来消除这些BUG。
  对CSS代码我们增加:
li a:hover {}
  对其属性我们仅设定width:100px;发现在IE6中依旧没有变化,我们尝试着更改width的value,比如使其width:99px,奇怪的事情发生了,在IE6中,隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试(初始值为#fff),更改 color值,发现在IE6下却也不能触发显示,奇怪,奇怪,真奇怪……是不是依旧是一头雾水……没关系,继续往下实验,或许归类了我们就能发现规律了!
  我们再用其他属性进行设置:width,positon,background,text-decoration,font-size,font- weight,font-family,border,float,display,font-style,margin,padding,text- align,overflow,text-transform,text-indent,z-index,vertical-align。
  我们发现除了text-decoration,color,z-index不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性,欢迎朋友补充)外,其他属性均可以做为消除伪类:hover BUG的特定属性。
说明:
  1、对于dispaly不可以用本例来测试,可另外写个更简单的例子(去除ul/li,a和span中的position)。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG,而且在某些例子中此属性不一定能消除BUG。
  2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变,如#fff和#ffffff在消除BUG中解析为2个不同的值。
最终效果:
Source Code to Run [www.fun52.com]
css
ul {list-style:none;}
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; }
使用CSS1做出的效果(无BUG)

鼠标移过来触发我吧!哈哈,终于被你发现

关于CSS在IE6以下浏览器不支持:hover伪类的解决方式

今天在W3Cfuns看到这么一篇文章(http://www.w3cfuns.com/thread-347-1-1.html),自己也亲自去测试了一下,很霸气,特别是IE在CSS的实现方式上其实还是下了...
  • C860_zy
  • C860_zy
  • 2013年10月30日 08:58
  • 2204

css中::before和::after伪元素的几种用法

一 基本语法: 这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CS...
  • nikita1995
  • nikita1995
  • 2016年08月03日 23:01
  • 3159

css中伪类:after的用法(三种方式)

CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。 除了它们,还有一些不被常使用的伪类,有:focus,:f...
  • acm765152844
  • acm765152844
  • 2016年05月08日 22:05
  • 3029

IE中中CSS伪类:hover的使用及其BUG

本文和大家重点讨论一下CSS伪类:hover在IE中使用及其BUG,伪类:hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单、相册效...
  • gigizhui
  • gigizhui
  • 2015年09月16日 10:34
  • 375

IE中伪类:hover的使用及BUG

:hover 是我们在 CSS 设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类 :hover,比如我们常见的纯 CSS 菜单、相册效果等等。 或许用了这么久的伪类 :hover,还有部分...
  • microfhu
  • microfhu
  • 2011年12月26日 22:15
  • 426

IE中伪类:hover的使用及BUG

:hover 是我们在 CSS 设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类 :hover,比如我们常见的纯 CSS 菜单、相册效果等等。或许用了这么久的伪类 :hover,还有部分朋友还不...
  • liubo67733898
  • liubo67733898
  • 2011年01月04日 13:15
  • 133

IE6下hover伪类显示隐藏子元素bug及解决方案

周所周知,ie6只有a元素支持hover伪类,在实际应用中,为了兼容ie6,有时候会使用a元素来做子元素的显示及隐藏,比如下图: 黄色小tips默认隐藏,鼠标hover到“促”字图标后,...
  • yan_zhizi3
  • yan_zhizi3
  • 2014年05月22日 16:51
  • 1046

css伪类元素的运用以及相应的hover的使用

有很多人会有疑问?为什么要用伪类元素,再增加一个标签不就好了?其实不然,使用伪类元素,一方面可以减少页面中的节点元素,加速页面渲染速度,另一方面可以为设计动画提供很多新思维,本文先介绍一些简单的伪类元...
  • weixin_40632390
  • weixin_40632390
  • 2018年01月08日 10:13
  • 30

一天坑之--css伪类,hover消除

精通css里是这么解释伪类的作用的:根据文档结构以外的一些条件,对元素进行样式的应用。大致意思就是我不需要像常用的选择器例如ul li{ background:red }这样去根据文档结构来应用样式。...
  • qq_23956627
  • qq_23956627
  • 2016年10月20日 20:03
  • 135

CSS :hover伪类选择定义和用法

伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式。 E元素可以通过其他选择器进行选择,比如使用类选择符、id选择符、类型选择符等等。 特别说明:IE6并非不支持此选择符,但能够支持...
  • wuxiaopeng_1986
  • wuxiaopeng_1986
  • 2016年10月21日 22:08
  • 157
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS伪类:hover 在IE中使用及其BUG
举报原因:
原因补充:

(最多只允许输入30个字)