jquery - 当元素共享同一类时，使用 jquery 应用悬停的问题

Question

当元素共享同一个类时，我在使用 jquery 应用悬停时遇到问题。这在仅使用 CSS 时工作得很好，但只要 JQuery 出现，它就会改变一切。

CSS

.btn {
background:#ccc;
padding:10px;
}
.btn:hover {
background:red;
padding:10px;
}

HTML

<a class="btn">Button 1</a><br /><br /><br />
<a class="btn">Button 2</a><br /><br /><br />
<a class="btn">Button 3</a><br /><br /><br />

<div id="paragraph"><p>Everything works fine with normal css Hover...</p></div>

<input type="button" id="btnchange" value="Change to JQuery Hover, blue color" />

jQuery

$('#btnchange').bind('click', function() {

                $(".btn").hover(function(){
                $(".btn").css({background: "blue"});
                },function(){
                $(".btn").css({background: "#ccc"});
                }); 

                $("#paragraph").html('<p>But then, when applying jquery hover, things work unexpectedly</p>');

});

这是现场小提琴

我不必修改 HTML 代码，只需修改 JQuery。

Answer 1

修改后的 jsFiddle

正如您编写的那样，jQuery 代码选择类“btn”的所有元素并将它们全部变为蓝色。您只需选择触发悬停事件的元素并将其变为蓝色。所以，

改变这个：

$('.btn').css({background: "blue"});

对此：

$(this).css({background: "blue"});

Answer 2

使用$(this)悬停函数内的选择器来定位实际悬停的元素：

$(".btn").hover(function(){
   $(this).css({background: "blue"});
},function(){
   $(this).css({background: "#ccc"});
}); 

Answer 3

".btn"将内部悬停更改为$(this)

jQuery 演示

$('#btnchange').bind('click', function() {

                    $(".btn").hover(function(){
                    $(this).css({background: "blue"});
                    },function(){
                    $(this).css({background: "#ccc"});
                    }); 

                    $("#paragraph").html('<p>But then, when applying jquery hover, things work unexpectedly</p>');

});