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/
精彩评论