即使在 jquery 绑定（“单击”）之后，悬停也能工作吗？

发布于 2024-11-07 19:42:55 字数 775 浏览 0 评论 0原文

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

感谢任何帮助。谢谢！

原文

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.

Working 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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夕色琉璃 2024-11-14 19:42:55

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

回复收藏 0 原文

や三分注定 2024-11-14 19:42:55

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

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/

回复收藏 0 原文

~没有更多了~