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/

甚至在jquery绑定（'click'）之后使悬停工作？

2 个答案: