Блог

В принципе, я хотел заставить наведение работать даже после щелчка привязки, но я установил .image26 и 27 в качестве фона по умолчанию. Сначала наведение работает, но при нажатии, поскольку я вернул его к значению по умолчанию, снова не работает.

Есть ли лучший подход к этому? Если я не поместил остальную часть изображения в положение по умолчанию, то все они будут помечены как щелкнутые.

Рабочий пример: http://jsfiddle.net/louiemiranda/RkM3t /

Код jquery:

 $(".image22").bind("click", function(event){
    $(this).css("background-position", "0 100%");
    $('#package22').attr("checked", "checked");
    $('.image26').css("background-position", "0 0");
    $('.image27').css("background-position", "0 0");
    var cashcredit = $('#package22').val();
    $('#fyi').html(cashcredit);
});

$(".image22").bind("mouseenter mouseleave", function(event){
    $(this).toggleClass("image22-selected");
});
  

Приветствуется любая помощь. Спасибо!

выпотрошил большую часть вашего кода, но я думаю, что это то, к чему вы стремитесь? http://jsfiddle.net/locrizak/LqWxt /

Как только вы вызываете css set background-position (свойство, которое вы ожидаете изменить, переключая image22-selected класс), это свойство css применяется как встроенный стиль и, следовательно, получает приоритет над правилом класса.

Вы могли бы удалить background-position свойство css перед переключением класса. Таким образом, ни один встроенный стиль не получит приоритета.

Однако я думаю, что более разумный способ добиться этого — использовать другое имя класса css, например image22-hover , и определять правила в этом порядке:

 image22 {
    background-image: url(your-image-22);
    background-position: 0 0;
}

image22-hover {
    background-position: move to a grey version of the image.
}

image22-selected {
    background-position: move to a selected version of the image.
}

image22-selected.image22-hover {
    background-position: move to a grey-selected version of the image.
}
  

Обратите внимание, что селекторы CSS-классов с цепочкой (последний селектор) не работают в IE6:
http://www.ryanbrill.com/archives/multiple-classes-in-ie /