Make the hover work even after a jquery bind('click')?

Basically, I wanted to make the hover work even after a bind click, but I set the .image26 and 27 to it's default background. The hover works at first, but when clicked, since I reset it back to default, does not work again.

Is there a better approach on this? If I did not put the rest of the image to it's default position, then all of them will be marked as clicked.

Wo开发者_如何学编程rking sample: http://jsfiddle.net/louiemiranda/RkM3t/

The jquery code:

$(".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");
});

Any help is appreciated. Thanks!

gutted a lot of your code but I think this is what your going for? http://jsfiddle.net/locrizak/LqWxt/

Once you call css to set background-position (a property that you are expecting to change by toggling image22-selected class), that css property is applied as inline style and, consequently, gains priority over a class rule.

You could remove the background-position css property before toggling the class. This way, no inline style would gain priority.

However, I think the more sensible way of achieving this is to use another css class name, like image22-hover and defining the rules in this order:

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.
}

Note that chained CSS classes selectors (the last selector) don't work in IE6: http://www.ryanbrill.com/archives/multiple-classes-in-ie/