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

当元素共享同一个类时，我有一个问题需要应用hover和jquery。当只使用CSS时，这工作得很好，但只要JQuery出现，它就会改变一切

CSS

HTML

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

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

更改此项：

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

为此：

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

在悬停函数中使用
$（this）
选择器以实际悬停的元素为目标：

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

将
“.btn”
内部悬停更改为
$（此）


$（'btnchange'）.bind（'click'，function（）{
$（“.btn”）.hover（函数（）{
$（this.css（{background:“blue”}）；
}，函数（）{
$（this.css（{背景：#ccc}）；
}); 
$（“#段落”）.html（“但是，当应用jquery hover时，事情意外地工作了”
”；
});

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

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

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

$('#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>');

});