Заставить hover работать даже после jquery bind ('click')? - PullRequest
Новая
       4

Заставить hover работать даже после jquery bind ('click')?

0 голосов
/ 17 мая 2011

По сути, я хотел, чтобы при наведении указатель мыши работал даже после щелчка, но я установил .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");
});

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

Ответы [ 2 ]

1 голос
/ 17 мая 2011

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

0 голосов
/ 17 мая 2011

Когда вы вызываете css для установки 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/

...