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>');

});

这里是直播Fiddle

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

Answer 1

Revised jsFiddle

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

更改此:

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

对此:

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