JQuery解决IE6不支持CSS hover伪类[Linux主机]

William2010-09-29 23:50设计39,454次浏览23条评论

扫一扫手机看

我们很早就知道IE6对于hover()伪类的支持很不好，IE6只支持a标签的hover，其他的都不支持。

这也就导致了很多想使用hover效果在IE6下就失效了，本人很，非常，十分，特别，超级讨厌IE6，但是就目前中国看来用IE6内核的实在是搞的离奇，IE9 beta都出来了，怎么你们就这么喜欢用IE6，算了，不抱怨了，抱怨了也木有用。问题还是要解决的。

网上也有很多解决的方法，说的最多就是用csshover.htc，这是微软提供的一个指令组合，用这个可以轻松的实现IE6的hover，话说之前我用的都是这个，不过用WordPress之后，换了Linux主机，然后我就发现不支持这个了，然后有些小郁闷，然后我又想实现这样的效果，怎么办呢？当然是有办法的，用JQuery。越来越喜欢JQuery了，方便，兼容性好，效果多。

我做了一个简单的预览效果，文字hover与图片hover。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery解决IE6不支持CSS hover伪类[Linux主机] | 威言威语</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".b").hover(function() {
$(this).css("background","url(weisay2.gif) no-repeat center bottom");
$(this).css("border","1px #999999 solid");
},function(){
$(this).css("background","url(weisay1.gif) no-repeat center top");
$(this).css("border","1px #CCCCCC solid");
});
$(".c").hover(function() {
$(this).css("color","#00CC33");
$(this).css("border","1px #999999 solid");
},function(){
$(this).css("color","#000066");
$(this).css("border","1px #CCCCCC solid");
});
});
</script>
<style type="text/css">
.c{color:#000066;
border:1px #CCCCCC solid;}
.c:hover{color:#00CC33;
border:1px #666666 solid}
.b{border:1px #CCCCCC solid;background:url(weisay1.gif) no-repeat center;
width:80px;height:80px}
.b:hover{background:url(weisay2.gif) no-repeat center;
border:1px #666666 solid}
</style>
</head>
<body>
<div class="c"><p>威言威语 weisay.com</p></div>
<div class="b"> </div>
</body>
</html>

将其复制保存下来，用IE6打开看效果。代码也很简单，一看就看懂了，注意class类的对应，

$(this).css("background","url(weisay2.gif) no-repeat center bottom");
$(this).css("border","1px #999999 solid");

是鼠标放上去的hover样式，

$(this).css("background","url(weisay1.gif) no-repeat center top");
$(this).css("border","1px #CCCCCC solid");

是没有鼠标经过的正常的样式，好了，我又啰嗦了。

通过这个代码，就可以轻松实现IE6的hover效果了。

JQuery解决IE6不支持CSS hover伪类[Linux主机]：目前有 23 条评论

9楼
jucelin：

受教，收藏，膜拜

2011-11-18 10:32 回复
8楼
oalleno：

太折腾了，为什么有IE6的出现。。

2010-11-07 19:23 回复
- William博主：
  
  @oallenoIE6可是一款经典的浏览器，是始祖。只是时代发展了，IE应该及时的淘汰掉。
  
  2010-11-07 19:47 回复
  - oalleno：
    
    @William虽然你这儿又教程，但我还是搞不定，以前我的是移位严重，现在还剩下导航栏几乎失去功能
    
    2010-11-07 19:56 回复
    - William博主：
      
      @oalleno其实IE6现在确实比较讨厌的。期待XP早日消亡，那么IE6就少N多了。
      
      2010-11-07 20:40 回复
      - oalleno：
        
        @William作为先驱，我已经用上win7了……
        
        2010-11-08 00:59 回复
7楼
bestchao：

小威你WP使用代码高亮的这个功能是什么插件？

2010-11-01 21:25 回复
6楼
拆墙部队：

这个跟 Linux 服务器有什么关系啊？浏览器解析跟这个好像不搭噶啊。

2010-10-15 17:14 回复
- William博主：
  
  @拆墙部队.htc是需要组件支持的，Windows自有属性，就类似于css hack，Linux正常不支持.htc脚本
  
  2010-10-15 22:55 回复
5楼
任侠：

这孩子，写代码不喜欢缩进，可不是好习惯

2010-10-04 21:12 回复
- William博主：
  
  @任侠这不是为了省空间么，减少代码行数，伪精简，哈哈
  
  2010-10-05 22:24 回复
4楼
任侠：

这个东西我正需要啊，哈哈

2010-10-04 21:09 回复
- William博主：
  
  @任侠有用就是好的，嘿嘿
  
  2010-10-05 22:25 回复
地板
箴言：

现在都在研究JQ，JQ的魅力越来越大啦··

2010-09-30 14:58 回复
- William博主：
  
  @箴言恩，兼容性好，毕竟用IE6的还是很多啊
  
  2010-09-30 15:50 回复
板凳
阿修罗：

还没用过LUNIX主机，学习一下也不错。

2010-09-30 14:21 回复
- William博主：
  
  @阿修罗其实也差不多，对一些特有的Windows的效果可能支持不好~
  
  2010-09-30 14:32 回复
  - oror：
    
    @William应该是客户端吧，服务器端无所谓的，最终的渲染还是在客户端
    
    2010-10-01 15:37 回复
    - William博主：
      
      @oror就是服务器端，Linux就是不认识Windows主机的.htc脚本。我还用Windows主机测试了呢，除非一种可能，我的Linux的主机比较另类
      
      2010-10-02 10:25 回复
      - oror：
        
        @WilliamLinux需要配置以便于解析HTC扩展名吧，默认为了安全只解析几种常见扩展名并反馈给客户端。
        
        2010-10-02 19:07 回复
        
        William博主：
        
        @oror对啊，所以一般情况下是不认识.htc的，所以我们得想个其他方法啊，JQuery就OK了啊，然后加个判断，只在IE6加载脚本，应该就OK了
        
        2010-10-02 19:54 回复
沙发
冰棱：

我的学姐现在就在学JQuery，好厚的一本书呀。。。。

2010-09-30 02:25 回复
- William博主：
  
  @冰棱JQuery的确很强大的，值得好好学习，我现在就在学习，呵呵
  
  2010-09-30 09:01 回复