或许用了这么久的伪类:hover，还有部分朋友还不完全了解hover的规则：
QUOTE:
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。
但目前IE5.5、IE6仅支持CSS1中的:hover，不过新出的IE7是支持CSS2中的:hover。
当我们用伪类:hover做某些特殊效果时，依据CSS2很好完成，但为了现在占据主流浏览器的IE6，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用CSS2的写法来实现：
XHTML部分：
[Copy to clipboard]CODE:
<ul>
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li>
</ul>
CSS部分：
[Copy to clipboard]CODE:
* {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>
提示：您可以先修改部分代码再运行
大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。
下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：
XHTML部分：
[Copy to clipboard]CODE:
<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部分：
[Copy to clipboard]CODE:
* {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>
提示：您可以先修改部分代码再运行
可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……
那到底是什么问题呢？
不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。
那又该如何解决这个问题呢？
这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。
下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。
对CSS代码我们增加：
[Copy to clipboard]CODE:
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个不同的值。
最终效果：
<!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 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; }
</style>
</head>
<body>
<ul>
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li>
</ul>
</body>
</html>
提示：您可以先修改部分代码再运行
建站知识 | 人世百态 | 网站导航 | 传统节日 | 搜索热点 | 星座运势 | 趣闻轶事 | 祝福的话 | 短信大全
© 2023 QicaiSpace.Com