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);
});

单击状态在这种情况下运行良好。还有一个类似于mouseover的mouseout（），但删除了'over'类。

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

<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类时（注意overclass现在位于活动类的顶部）：

#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似乎不喜欢在同一个元素上的两个类之间切换。。。不确定这里发生了什么，需要一些关于如何将鼠标悬停并点击以正常工作的帮助。

我已经在Firefox中对它进行了防火处理，它正在按照应该的方式更改类。。。我相信它是在IE6中实现的，但我认为它与CSS有关。。。与其说是jQuery。。。

哦，我试着加了一个！对超类的背景地位的重要指示，但这仍然不起作用。

Answer 1

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

.over#button-1

等等。这篇文章似乎解释了如何让它在IE6中发挥作用。