即使在 jquery 绑定（'click'）之后也使悬停工作？答案

【问题标题】：Make the hover work even after a jquery bind('click')?即使在 jquery 绑定（'click'）之后也使悬停工作？
【发布时间】：2011-08-26 21:30:39
【问题描述】：

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

感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript jquery user-interface interface hover

【解决方案1】：

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

【讨论】：

【解决方案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/

【讨论】：