jQuery鼠标移出/鼠标移出/单击状态图像在IE6中不起作用

Question

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

代码可以在我测试过的所有浏览器(FF3.6PC和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不喜欢在同一个元素上的两个类之间切换……不知道这里发生了什么，需要一些帮助来让鼠标悬停和点击按他们应该的方式工作。

我已经在Firefox中对它进行了阻燃处理，它正在按照它应该的方式改变类……我相信它是在IE6中实现的，但我认为它是用CSS实现的。不太像jQuery..。

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

Answer 1

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

.over#button-1

诸若此类。这篇文章似乎是explain how to get it to work in IE6的。