IE中伪类:hover的使用及BUG

作者：blank 来源：蓝色经典时间：2007-05-11 17:04: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;}

演示效果：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IE中伪类:hover的使用及BUG</title> <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="">哈哈，终于被你发现了！</a></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

大家可以测试发现在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; }

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE中伪类:hover的使用及BUG</title><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 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="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li> </ul></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2 下一页

标签：IE,hover,CSS

投稿

IE中伪类:hover的使用及BUG

猜你喜欢

ASP给长的标题加省略号...

如何在SQL Server中由原子建立分子查询

php面向对象程序设计介绍

一段Asp301重定向过程代码

SQL临时表递归查询子信息并返回记录的代码

质量更好的tags标签效果

msxml3.dll 错误解决办法

服务器XMLHTTP(Server XMLHTTP in ASP)基础知识

玩转MySQL中的外键约束之PHP篇

ASP读取ini文件

深入剖析SQL Server的六种数据移动方法

JavaScript 数组的 uniq 方法

jquery中文手册上的一点错误--说说p标签失去焦点

ASP中 ADODB.Stream 语法速查

交互设计实用指南系列(10)—别让我思考

几个好用的Asp自定义函数

MySQL表设计优化与索引 (四)

做了CDN加速的ASP网站获取用户真实IP程序

《web信息架构》——分类方式

SQL Server 2000 作数据库服务器的优点