IE中中CSS伪类:hover的使用及其BUG
2015-09-16 10:34
639 查看
本文和大家重点讨论一下CSS伪类:hover在IE中使用及其BUG,伪类:hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单、相册效果等等。
CSS伪类:hover 在IE中使用及其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的写法来实现:
XHTML部分:
ExampleSourceCode
<ul>
<li>鼠标移过来触发我吧!<ahrefahref="#"title="">
哈哈,终于被你发现了!</a></li>
</ul>
CSS部分:
ExampleSourceCode
*{margin:0;padding:0;}
ul{list-style:none;margin:100px;}
li{height:100px;width:100px;background:#000;
font-size:12px;color:#fff;position:relative;}
lia{display:none;}
li:hovera{display:block;
text-decoration:none;width:100px;height:100px;
background:#c00;position:absolute;top:50px;
left:50px;color:#fff;}
◆查看效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;
font-size:12px;color:#fff;position:relative;}
lia{display:none;}
li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00;
position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS2做出的效果</h2>
<ul>
<li>鼠标移过来触发我吧!<ahrefahref="#"title="">哈哈,终于被你发现了!</a></li>
</ul>
</body>
</html>
[可先修改部分代码再运行查看效果]
◆大家可以测试发现在FF等对CSS2支持很好的浏览器中,可以显示我们所要达到的效果,但在IE6中却无法实现。
下面让我们换一种思维,所用CSS1的写法来看看,这个时候由于无法支持li元素:hover的使用,我们只好把所有文字包含到a中,对a使用:hover,并且将要显示隐藏的部分放到span元素中,首先我们对XHTML进行部分调整,调整如下:
XHTML部分:
ExampleSourceCode
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li>
</ul>
CSS中我们将a的设置成块级元素,并使a的大小和宽度和li的相同,并设置a为相对位置,用a来模拟上例中的li;而用span来模拟上例中的a,设置span在默认情况下隐藏(display:none;),当a被触发时(:hover),则span显示(display:block;)
CSS部分:
ExampleSourceCode
*{margin:0;padding:0;}
ul{list-style:none;margin:100px;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;
position:relative;color:#fff;text-decoration:none;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;
background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
◆查看效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;position:relative;
color:#fff;text-decoration:none;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;background:#c00;
position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS1做出的效果(有BUG)</h2>
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!
<span>哈哈,终于被你发现</span></a></li>
</ul>
</body>
</html>
[可先修改部分代码再运行查看效果]
可我们发现上例中的效果,在IE6中依然无法显示,难道我们的代码写错了,可检查来检查去一点错误也没有(不信你找个高高手问问,他们依然会回答你,这代码完全正确),难道是标准中的说明是错的?还是IE6浏览器连CSS1也不支持?
那到底是什么问题呢?
不是标准说明的错,也不是IE浏览器不支持CSS1,而是IE浏览器自身解析的问题,是IE5.5和IE6中伪类:hover的BUG。
那又该如何解决这个问题呢?
◆这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。下面我们对上面的第二个例子进行实验,究竟哪些属性可以帮我们来消除这些BUG。
对CSS代码我们增加:
lia:hover{}
对其属性我们仅设定width:100px;发现在IE6中依旧没有变化,我们尝试着更改width的value,比如使其width:99px,奇怪的事情发生了,在IE6中,隐藏的部分在触发的时候显示出来了。我们再对lia: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不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性,欢迎朋友补充)外,其他属性均可以做为消除伪类:hoverBUG的特定属性。
说明:
1、对于dispaly不可以用本例来测试,可另外写个更简单的例子(去除ul/li,a和span中的position)。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG,而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变,如#fff和#ffffff在消除BUG中解析为2个不同的值。
◆最终效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;
position:relative;color:#fff;text-decoration:none;}
lia:hover{background:#ccc;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;
background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS1做出的效果(无BUG)</h2>
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!
<span>哈哈,终于被你发现</span></a></li>
</ul>
</body>
</html>
CSS伪类:hover 在IE中使用及其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的写法来实现:
XHTML部分:
ExampleSourceCode
<ul>
<li>鼠标移过来触发我吧!<ahrefahref="#"title="">
哈哈,终于被你发现了!</a></li>
</ul>
CSS部分:
ExampleSourceCode
*{margin:0;padding:0;}
ul{list-style:none;margin:100px;}
li{height:100px;width:100px;background:#000;
font-size:12px;color:#fff;position:relative;}
lia{display:none;}
li:hovera{display:block;
text-decoration:none;width:100px;height:100px;
background:#c00;position:absolute;top:50px;
left:50px;color:#fff;}
◆查看效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;
font-size:12px;color:#fff;position:relative;}
lia{display:none;}
li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00;
position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS2做出的效果</h2>
<ul>
<li>鼠标移过来触发我吧!<ahrefahref="#"title="">哈哈,终于被你发现了!</a></li>
</ul>
</body>
</html>
[可先修改部分代码再运行查看效果]
◆大家可以测试发现在FF等对CSS2支持很好的浏览器中,可以显示我们所要达到的效果,但在IE6中却无法实现。
下面让我们换一种思维,所用CSS1的写法来看看,这个时候由于无法支持li元素:hover的使用,我们只好把所有文字包含到a中,对a使用:hover,并且将要显示隐藏的部分放到span元素中,首先我们对XHTML进行部分调整,调整如下:
XHTML部分:
ExampleSourceCode
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li>
</ul>
CSS中我们将a的设置成块级元素,并使a的大小和宽度和li的相同,并设置a为相对位置,用a来模拟上例中的li;而用span来模拟上例中的a,设置span在默认情况下隐藏(display:none;),当a被触发时(:hover),则span显示(display:block;)
CSS部分:
ExampleSourceCode
*{margin:0;padding:0;}
ul{list-style:none;margin:100px;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;
position:relative;color:#fff;text-decoration:none;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;
background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
◆查看效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;position:relative;
color:#fff;text-decoration:none;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;background:#c00;
position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS1做出的效果(有BUG)</h2>
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!
<span>哈哈,终于被你发现</span></a></li>
</ul>
</body>
</html>
[可先修改部分代码再运行查看效果]
可我们发现上例中的效果,在IE6中依然无法显示,难道我们的代码写错了,可检查来检查去一点错误也没有(不信你找个高高手问问,他们依然会回答你,这代码完全正确),难道是标准中的说明是错的?还是IE6浏览器连CSS1也不支持?
那到底是什么问题呢?
不是标准说明的错,也不是IE浏览器不支持CSS1,而是IE浏览器自身解析的问题,是IE5.5和IE6中伪类:hover的BUG。
那又该如何解决这个问题呢?
◆这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。下面我们对上面的第二个例子进行实验,究竟哪些属性可以帮我们来消除这些BUG。
对CSS代码我们增加:
lia:hover{}
对其属性我们仅设定width:100px;发现在IE6中依旧没有变化,我们尝试着更改width的value,比如使其width:99px,奇怪的事情发生了,在IE6中,隐藏的部分在触发的时候显示出来了。我们再对lia: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不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性,欢迎朋友补充)外,其他属性均可以做为消除伪类:hoverBUG的特定属性。
说明:
1、对于dispaly不可以用本例来测试,可另外写个更简单的例子(去除ul/li,a和span中的position)。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG,而且在某些例子中此属性不一定能消除BUG。
2、对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变,如#fff和#ffffff在消除BUG中解析为2个不同的值。
◆最终效果:
SourceCodetoRun
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=gb2312"/>
<title>css</title>
<styletypestyletype="text/css">
ul{list-style:none;}
li{height:100px;width:100px;background:#000;font-size:12px;}
lia{display:block;height:100px;width:100px;
position:relative;color:#fff;text-decoration:none;}
lia:hover{background:#ccc;}
lispan{display:none;}
lia:hoverspan{display:block;width:100px;height:100px;
background:#c00;position:absolute;top:50px;left:50px;color:#fff;}
</style>
</head>
<body>
<h2>使用CSS1做出的效果(无BUG)</h2>
<ul>
<li><ahrefahref="#"title="">鼠标移过来触发我吧!
<span>哈哈,终于被你发现</span></a></li>
</ul>
</body>
</html>
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法
- 用vbs 实现从剪贴板中抓取一个 URL 然后在浏览器中打开该 Web 站点
- web标准知识——从p开始,循序渐进
- web标准知识――用途相似的标签
- Shell脚本实现的一个简易Web服务器例子分享