jQuery mouseover/mouseout/click 状态图像在 IE6 中不起作用

Question

我遇到 IE6 无法处理 3 按钮状态代码的问题。我必须让这个在 IE6 中工作，所以不支持它不是一个选项。

该代码适用于我测试过的所有浏览器(FF3.6 PC 和 MAC、IE8 PC、Safari MAC)，IE6 (PC) 除外。

这是 css 的作用:

#button-1, #button-2, #button-3 {
         background-image: url('/images/inactive.png');
         background-position: top left;
}
.active#button-1, .active#button-2, .active#button-3 {
         background-position: top right;
}
.over#button-1, .over#button-2, .over#button-3 {
         background-position: bottom left;
}    

然后是 jQuery:

$('#button-1).mouseover(function(){
    if($('#button-1').hasClass('active') == false){
        $('#button-1').addClass('over');
    }
});
$('#button-2).mouseover(function(){
    if($('#button-2').hasClass('active') == false){
        $('#button-2').addClass('over');
    }
});
$('#button-3).mouseover(function(){
    if($('#button-3').hasClass('active') == false){
        $('#button-3').addClass('over');
    }
});
$('#button-1).click(function(){
    changeTab(1);
});
$('#button-2).click(function(){
    changeTab(2);
});
$('#button-3).click(function(){
    changeTab(3);
});

点击状态在此上下文中工作正常。还有一个 mouseout() 类似于 mouseover 但删除了 'over' 类。

当然还有更多，然后它只是一个标准的空 div 元素，其 id 为 button-1 或类似的东西

<div id="button-1">
    <div>Text</div>
</div>

<div id="button-2">
    <div>Text</div>
</div>

<div id="button-3">
    <div>Text</div>
</div>

当我像这样反转 CSS 类时(注意 over 类现在位于事件类之上):

#button-1, #button-2, #button-3 {
         background-image: url('/images/inactive.png');
         background-position: top left;
}
.over#button-1, .over#button-2, .over#button-3 {
         background-position: bottom left;
} 
.active#button-1, .active#button-2, .active#button-3 {
         background-position: top right;
}

在这种情况下，IE6 会进行翻转但不会进行点击...似乎 IE6 不喜欢在同一元素的 2 个类之间切换...不确定这里发生了什么，需要一些帮助来了解如何让鼠标悬停和点击正常工作。

我已经在 Firefox 中对它进行了 firebug，它正在按应有的方式更改类...我相信它在 IE6 中会这样做，但我认为它与 CSS 相关...与其说是 jQuery...

哦，我已经尝试将 !important 指令添加到 over 类的背景位置，但仍然不起作用。

Answer 1

我认为 IE6 不能很好地处理多个 CSS 选择器？所以它可能有问题

.over#button-1

等等。这个帖子好像explain how to get it to work in IE6 .