Question

我想单独使用每个按钮来更改其背景图像，因为用户翻转它。

正如我现在所说的那样，他们正在同时改变按钮，但这并不是我希望他们表现出来的。

请你能帮帮我吗？

非常感谢提前!!! = d

Answer 1

您的脚本会更改每个按钮，因为您将所有切换放在each()下，这意味着当其中任何一个切换触发悬停事件时，所有切换都会应用。

但你甚至不需要JavaScript / jQuery。只需在CSS中进行以下更改并删除jQuery：

.button:hover .btn-left{
    background:url(../images/btn-left-hover.png);
}

.button:hover .btn-middle{
    background:url(../images/btn-middle-hover.png);
}

.button:hover .btn-right{
    background:url(../images/btn-right-hover.png);
}

或者，您可以对脚本进行以下编辑。这只会更新您的悬停元素子项的span。

$(this).find('.btn-left').toggleClass('btn-left-hover');
$(this).find('.btn-middle').toggleClass('btn-middle-hover');
$(this).find('.btn-right').toggleClass('btn-right-hover');

Answer 2

您不需要each()。只需使用$(".button").hover()

即可

并在回调中使用它：

$(this).children('.btn-left').eq(0).toggleClass('btn-left-hover');

Answer 3

只需为每个选择器指定上下文为this：

$('.button').hover(function(){
    $('.btn-left', this).toggleClass('btn-left-hover');
    $('.btn-middle', this).toggleClass('btn-middle-hover');
    $('.btn-right', this).toggleClass('btn-right-hover');
});

我还删除了.each()，因为这是不必要的（无论如何都将悬停应用于每个匹配的元素）。

JSFiddle

使用jquery更改EACH按钮背景图像

3 个答案: