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

本文和大家重点讨论一下CSS伪类:hover 在IE中使用及其BUG，伪类:hover是我们在CSS设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类:hover，比如我们常见的纯CSS菜单、相册效果等等。

创新互联是一家专业提供将乐企业网站建设,专注与成都网站制作、网站建设、成都h5网站建设、小程序制作等业务。10年已为将乐众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

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

 
 
 
    
  
  
  
    1. 
  
  
  
    • 鼠标移过来触发我吧！
      • 
  
  
  
    • 哈哈，终于被你发现了！
      • 
  
  
  
    2. 
  
  
  
  2.

 CSS部分：

ExampleSourceCode

 
 
 
    
  
  
  
  1. *{margin:0;padding:0;} 
    2. 
  
  
  
  2. ul{list-style:none;margin:100px;} 
    3. 
  
  
  
  3. li{height:100px;width:100px;background:#000; 
    4. 
  
  
  
  4. font-size:12px;color:#fff;position:relative;} 
    5. 
  
  
  
  5. lia{display:none;} 
    6. 
  
  
  
  6. li:hovera{display:block; 
    7. 
  
  
  
  7. text-decoration:none;width:100px;height:100px; 
    8. 
  
  
  
  8. background:#c00;position:absolute;top:50px;
    9. 
  
  
  
  9. left:50px;color:#fff;} 
    10. 
  
  
  
  10.

◆查看效果：

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
    6. 
  
  
  
  6. css
    7. 
  
  
  
    8. 
  
  
  
  8. ul{list-style:none;} 
    9. 
  
  
  
  9. li{height:100px;width:100px;background:#000; 
    10. 
  
  
  
  10. font-size:12px;color:#fff;position:relative;} 
    11. 
  
  
  
  11. lia{display:none;} 
    12. 
  
  
  
  12. li:hovera{display:block;text-decoration:none;width:100px;height:100px;background:#c00; 
    13. 
  
  
  
  13. position:absolute;top:50px;left:50px;color:#fff;} 
    14. 
  
  
  
  14. 
  
  
  
  15. 
  
  
  
  16. 
  
  
  
  17. 使用CSS2做出的效果
    18. 
  
  
  
    18. 
  
  
  
    • 鼠标移过来触发我吧！哈哈，终于被你发现了！
      • 
  
  
  
    19. 
  
  
  
  19. 
  
  
  
  20. 
  
  
  
  21.

 [可先修改部分代码再运行查看效果]#p#

    ◆大家可以测试发现在FF等对CSS2支持很好的浏览器中，可以显示我们所要达到的效果，但在IE6中却无法实现。

　　下面让我们换一种思维，所用CSS1的写法来看看，这个时候由于无法支持li元素:hover的使用，我们只好把所有文字包含到a中，对a使用:hover，并且将要显示隐藏的部分放到span元素中，首先我们对XHTML进行部分调整，调整如下：

XHTML部分：

ExampleSourceCode

 
 
 
    
  
  
  
    1. 
  
  
  
    • 鼠标移过来触发我吧！哈哈，终于被你发现
      • 
  
  
  
    2. 
  
  
  
  2.

　　CSS中我们将a的设置成块级元素，并使a的大小和宽度和li的相同，并设置a为相对位置，用a来模拟上例中的li；而用span来模拟上例中的a，设置span在默认情况下隐藏（display:none;），当a被触发时（:hover），则span显示（display:block;）

CSS部分：

ExampleSourceCode

 
 
 
    
  
  
  
  1. *{margin:0;padding:0;} 
    2. 
  
  
  
  2. ul{list-style:none;margin:100px;} 
    3. 
  
  
  
  3. li{height:100px;width:100px;background:#000;font-size:12px;} 
    4. 
  
  
  
  4. lia{display:block;height:100px;width:100px; 
    5. 
  
  
  
  5. position:relative;color:#fff;text-decoration:none;} 
    6. 
  
  
  
  6. lispan{display:none;} 
    7. 
  
  
  
  7. lia:hoverspan{display:block;width:100px;height:100px; 
    8. 
  
  
  
  8. background:#c00;position:absolute;top:50px;left:50px;color:#fff;} 
    9.

 ◆查看效果：

SourceCodetoRun

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 
  
  
  
  6. content="text/html;charset=gb2312"/>
    7. 
  
  
  
  7. css
    8. 
  
  
  
    9. 
  
  
  
  9. ul{list-style:none;} 
    10. 
  
  
  
  10. li{height:100px;width:100px;background:#000;font-size:12px;} 
    11. 
  
  
  
  11. lia{display:block;height:100px;width:100px;position:relative; 
    12. 
  
  
  
  12. color:#fff;text-decoration:none;} 
    13. 
  
  
  
  13. lispan{display:none;} 
    14. 
  
  
  
  14. lia:hoverspan{display:block;width:100px;height:100px;background:#c00; 
    15. 
  
  
  
  15. position:absolute;top:50px;left:50px;color:#fff;} 
    16. 
  
  
  
  16. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 使用CSS1做出的效果（有BUG）
    20. 
  
  
  
    20. 
  
  
  
    • 鼠标移过来触发我吧！
      • 
  
  
  
    • 哈哈，终于被你发现
      • 
  
  
  
    21. 
  
  
  
  21. 
  
  
  
  22.

[可先修改部分代码再运行查看效果]

　　可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？#p#

那到底是什么问题呢？

　　不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。

那又该如何解决这个问题呢？

　　◆这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。

　　对CSS代码我们增加：

 
 
 
    
  
  
  
  1. lia:hover{} 
    2. 
  
  
  
  2.

　　对其属性我们仅设定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

 
 
 
    
  
  
  
  1. 
  
  
  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. 
  
  
  
    4. 
  
  
  
  4. 
  
  
  
  5. 
  
  
  
  6. content="text/html;charset=gb2312"/>
    7. 
  
  
  
  7. css
    8. 
  
  
  
    9. 
  
  
  
  9. ul{list-style:none;} 
    10. 
  
  
  
  10. li{height:100px;width:100px;background:#000;font-size:12px;} 
    11. 
  
  
  
  11. lia{display:block;height:100px;width:100px; 
    12. 
  
  
  
  12. position:relative;color:#fff;text-decoration:none;} 
    13. 
  
  
  
  13. lia:hover{background:#ccc;} 
    14. 
  
  
  
  14. lispan{display:none;} 
    15. 
  
  
  
  15. lia:hoverspan{display:block;width:100px;height:100px; 
    16. 
  
  
  
  16. background:#c00;position:absolute;top:50px;left:50px;color:#fff;} 
    17. 
  
  
  
  17. 
  
  
  
  18. 
  
  
  
  19. 
  
  
  
  20. 使用CSS1做出的效果（无BUG）
    21. 
  
  
  
    21. 
  
  
  
    • 鼠标移过来触发我吧！
      • 
  
  
  
    • 哈哈，终于被你发现
      • 
  
  
  
    22. 
  
  
  
  22. 
  
  
  
  23.

[可先修改部分代码再运行查看效果]

网页名称：IE中中CSS伪类:hover的使用及其BUG
网页地址：http://www.csdahua.cn/qtweb/news15/395515.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

软件开发知识

同城分类信息

高端品牌网站建设　　 　成都小程序开发公司　　 　仿古建筑设计　　 　h5响应式网站　　 　zzfdjwx.com　　 　教育建设方案　　 　成都微信公众号开发　　 　免费收录网站　　 　佑馨产后护理　　 　H5建站　　 　鸿艺文化传播　　 　谷歌推广　　 　成都网站推广公司　　 　四川锦华橡塑　　 　重庆电信回兴机房　　 　小程序开发　　 　成都门户网站建设　　 　成都广告制作　　 　温江服务器托管　　 　重庆服务器托管