javascript - 影响具有相同类的所有 html 元素的 jquery

Question

最近几天我在做一个元素，现在在这个元素中，我有一个带有这样按钮的侧边栏

<div class="btn">
   Button 1
</div>
<div class="btn">
   Button 2
</div>
<div class="btn">
   Button 3
</div>

另外，我有一些像这样的 mouseenter 事件代码的 javascript

$(function).ready(function(){
    $('.btn').mouseenter(function(){
        $('.btn').css('color', 'red');   
    });
});

现在的问题是这段 javascript 代码正在更改具有相同类的所有元素。我不想要它。我只想更改一个按钮。

例如，如果悬停在第一个按钮上，javascript 代码应该只更改第一个按钮的颜色，而不是其他按钮

出于某种原因，我不能在这种情况下使用 CSS

谁能帮我解决这个问题

Answer 1

您需要使用 $(this) 专门引用该元素，否则所有类为“.btn”的元素都会更改:

$('.btn').mouseenter(function () {

    $(this).css('color', 'red');

});