即使在 jquery 绑定('click')之后，悬停也能正常工作？

Question

基本上，我想即使在绑定单击后也能使悬停工作，但我将 .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");
});

任何帮助，不胜感激。谢谢！

Answer 1

破坏

了你的很多代码，但我认为这就是你想要的？ http://jsfiddle.net/locrizak/LqWxt/

Answer 2

一旦您调用 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/