Jquery 悬停和切换功能在 IE6 中不起作用？答案

【问题标题】：Jquery hover and toggle functions are not working in IE6?Jquery 悬停和切换功能在 IE6 中不起作用？
【发布时间】：2011-08-12 10:36:01
【问题描述】：

这个自定义滑块在所有其他浏览器中都能正常工作，但 IE6/可能 7 像往常一样令人痛苦。尽管我很想使用预制滑块，但它不是一个选项。

主要代码如下：

$(document).ready(function() {

//Slider Movement

    //Slide 1
    $(".hpsnav1").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-40px",
        }, 1000 );
    });
    //Slide 2
    $(".hpsnav2").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-744px",
        }, 1000 );
    });
    //Slide 3
    $(".hpsnav3").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-1448px",
        }, 1000 );
    });
    //Slide 4
    $(".hpsnav4").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-2152px",
        }, 1000 );
    });
    //Slide 5
    $(".hpsnav5").click(function() {
        $(".slider-list").animate(
        {
            marginLeft: "-2860px",
        }, 1000 );
    });

// Slide Previews

    $(".hpsnav1").live('hover', function() {
        $(".prvw1").toggle();
    })
    $(".hpsnav2").live('hover', function() {
        $(".prvw2").toggle();
    })
    $(".hpsnav3").live('hover', function() {
        $(".prvw3").toggle();
    })
    $(".hpsnav4").live('hover', function() {
        $(".prvw4").toggle();
    })
    $(".hpsnav5").live('hover', function() {
        $(".prvw5").toggle();
    })

});

这是 HTML：

<div class="slider-wrap">
  <div class="slider-nav">
    <ul class="slider-nav-options">
      <li class="hpsnav1">1</li>
      <li class="hpsnav2">2</li>
      <li class="hpsnav3">3</li>
      <li class="hpsnav4">4</li>
      <li class="hpsnav5">5</li>
    </ul>
    <div class="slider-preview prvw1">Preview 1</div>
    <div class="slider-preview prvw2">Preview 2</div>
    <div class="slider-preview prvw3">Preview 3</div>
    <div class="slider-preview prvw4">Preview 4</div>
    <div class="slider-preview prvw5">Preview 5</div>
  </div>
  <ul class="slider-list">
    <li style="background:#066;" class="firstslide hps1"></li>
    <li style="background:#960;" class="hps2"></li>
    <li style="background:#3CC;" class="hps3"></li>
    <li style="background:#639;" class="hps4"></li>
    <li style="background:#9FF;" class="hps5"></li>
  </ul>
</div>

这是主要的样式表：

.slider-wrap {
    margin:0;
    width:704px;
    height:313px;
    overflow:hidden;
    background:#F00;
}
.slider-list {
    margin:-67px 0 0 -40px;
    width:4000px;
    height:271px;
    list-style:none;
    background:#06F;
}
.slider-list .firstslide {
    margin-left:0;
}
.slider-list li {
    margin:0 0 0 -8px;
    width:708px;
    height:271px;
    position:relative;
    display:inline-block;
    top:0px;
}
.hps1 {background:#0F0;}
.hps2 {background:#093;}
.hps3 {background:#0CC;}
.hps4 {background:#66C;}
.hps5 {background:#F63;}

.slider-nav {
    margin:0;
    width:704px;
    height:47px;
    background:#f8d824;
    position:relative;
    top:250px;
}
.slider-nav-options li {
    display:inline;
    cursor:pointer;
    position:relative;
    top:13px;
}
.slider-preview {
    width:460px;
    height:20px;
    position:relative;
    left:220px;
    top:-24px;
    display:none;
    text-align:center;
}

这是 IE6 样式表：

@charset "utf-8";
/* New Slider - IE6 */

    .slider-wrap {
        position:relative;
        margin:0;
        width:704px;
        height:313px;
        background:#F00;
        overflow:hidden;
    }
    .slider-list {
        margin:-47px 0 0 -4px;
        width:4000px;
        height:271px;
        list-style:none;
        background:#06F;
        overflow:hidden;
    }
    .slider-list .firstslide {
        margin-left:2px!important;
    }
    .slider-list li {
        margin:0 0 0 -8px;
        float:left;
        width:712px;
        height:266px;
        position:relative;
        display:inline-block;
        top:0px;
    }
    .hps1 {background:#0F0;}
    .hps2 {background:#093;}
    .hps3 {background:#0CC;}
    .hps4 {background:#66C;}
    .hps5 {background:#F63;}

    .slider-nav {
        margin:0;
        width:704px;
        height:47px;
        background:#f8d824;
        position:relative;
        top:266px;
    }
    .slider-nav-options li {
        display:inline;
        cursor:pointer;
        position:relative;
        top:13px;
    }
    .slider-preview {
        width:460px;
        height:20px;
        position:relative;
        left:220px;
        top:-24px;
        display:none;
        text-align:center;
    }

【问题讨论】：

哈哈哈如何在不被剥离的情况下将代码放在这里？
@user585148：使用编辑器中的{} 按钮:)
您有代码的实时示例吗？
IE6 和 IE7 做错了什么？
对于初学者来说，您的 javascript 格式错误。 IE6 可能对此有所保留。删除“左边距”赋值后多余的逗号，并在“活”方法后添加分号。

标签： jquery internet-explorer-6 hover slider toggle

【解决方案1】：

你应该使用这个：

<script>
if ($.browser.msie==true) {
alert("Stop using IE. It's a terrible web browser.");
}

但是，如果你真的没有找到答案，你可以说这个网站与 IE 不兼容。

【讨论】：