当前位置: 首页 > 设计 > 正文
avatar

IE6对于hover()伪类的支持很不好,IE6只支持a标签的hover,其他的都不支持。Windows主机用csshover.htc,其实我们可以用JQuery解决IE6不支持CSS hover伪类这一问题。

我们很早就知道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效果了。

本文固定链接: http://www.weisay.com/blog/jquery-solve-ie6-nonsupport-css-hover.html | 威言威语

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

  1. avatar
    9楼
    jucelin Google Chrome Windows

    受教,收藏,膜拜 :wink:

    2011-11-18 10:32 [回复]
  2. avatar
    8楼
    oalleno Mozilla Firefox Windows

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

    2010-11-07 19:23 [回复]
    • avatar
      William Internet Explorer Windows

      IE6可是一款经典的浏览器,是始祖。只是时代发展了,IE应该及时的淘汰掉。

      2010-11-07 19:47 [回复]
      • avatar
        oalleno Mozilla Firefox Windows

        虽然你这儿又教程,但我还是搞不定,以前我的是移位严重,现在还剩下导航栏几乎失去功能

        2010-11-07 19:56 [回复]
        • avatar
          William Internet Explorer Windows

          其实IE6现在确实比较讨厌的。期待XP早日消亡,那么IE6就少N多了。

          2010-11-07 20:40 [回复]
          • avatar
            oalleno Mozilla Firefox Windows

            作为先驱,我已经用上win7了……

            2010-11-08 00:59 [回复]
  3. avatar
    7楼
    bestchao 世界之窗浏览器 Windows

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

    2010-11-01 21:25 [回复]
  4. avatar
    6楼
    拆墙部队 Maxthon Windows

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

    2010-10-15 17:14 [回复]
    • avatar
      William Internet Explorer Windows

      .htc是需要组件支持的,Windows自有属性,就类似于css hack,Linux正常不支持.htc脚本

      2010-10-15 22:55 [回复]
  5. avatar
    5楼
    任侠 搜狗浏览器 Windows

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

    2010-10-04 21:12 [回复]
    • avatar
      William Internet Explorer Windows

      这不是为了省空间么,减少代码行数,伪精简,哈哈

      2010-10-05 22:24 [回复]
  6. avatar
    4楼
    任侠 搜狗浏览器 Windows

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

    2010-10-04 21:09 [回复]
    • avatar
      William Internet Explorer Windows

      有用就是好的,嘿嘿

      2010-10-05 22:25 [回复]
  7. avatar
    地板
    箴言 Internet Explorer Windows

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

    2010-09-30 14:58 [回复]
    • avatar
      William Maxthon Windows

      恩,兼容性好,毕竟用IE6的还是很多啊

      2010-09-30 15:50 [回复]
  8. avatar
    板凳
    阿修罗 世界之窗浏览器 Windows

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

    2010-09-30 14:21 [回复]
    • avatar
      William Maxthon Windows

      其实也差不多,对一些特有的Windows的效果可能支持不好~

      2010-09-30 14:32 [回复]
      • avatar
        oror Internet Explorer Windows

        应该是客户端吧,服务器端无所谓的,最终的渲染还是在客户端

        2010-10-01 15:37 [回复]
        • avatar
          William Internet Explorer Windows

          就是服务器端,Linux就是不认识Windows主机的.htc脚本。我还用Windows主机测试了呢,除非一种可能,我的Linux的主机比较另类

          2010-10-02 10:25 [回复]
          • avatar
            oror Internet Explorer Windows

            Linux需要配置以便于解析HTC扩展名吧,默认为了安全只解析几种常见扩展名并反馈给客户端。

            2010-10-02 19:07 [回复]
            • avatar
              William Internet Explorer Windows

              对啊,所以一般情况下是不认识.htc的,所以我们得想个其他方法啊,JQuery就OK了啊,然后加个判断,只在IE6加载脚本,应该就OK了

              2010-10-02 19:54 [回复]
  9. avatar
    沙发
    冰棱 Opera Windows

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

    2010-09-30 02:25 [回复]
    • avatar
      William Maxthon Windows

      JQuery的确很强大的,值得好好学习,我现在就在学习,呵呵

      2010-09-30 09:01 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter