У меня проблема с IE6, не работающим для обработки кода состояния из 3 кнопок. Я должен заставить это работать в IE6, так что просто не поддерживать это не вариант.
Код работает в каждом браузере, в котором я тестировал (ПК и MAC FF3.6, ПК IE8, MAC Safari), КРОМЕ IE6 (ПК).
Вот что делает 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 с идентификатором 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 ...
О, и я попытался добавить директиву! Важное к фоновой позиции над классами, но это все еще не работает.