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（），但删除了'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 class现在位于活动类之上）：

#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中对它进行了火爆，它正在改变它们应该...我相信它在IE6中做它但我觉得它与CSS的东西...不是那么多jQuery ......

哦，我已经尝试在过分类的背景位置添加一个！important指令，但仍然无效。

Answer 1

我认为IE6不能很好地处理多个CSS选择器？

可能存在问题

.over#button-1

等等。这篇文章似乎是explain how to get it to work in IE6。

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

1 个答案: