Question

最近几天我正在开发一个项目，现在在这个项目中，我有一个带有这样按钮的侧边栏

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

另外，我有一些像这样的鼠标中心事件代码的javascript

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

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

例如，如果将鼠标悬停在第一个按钮上，则javascript代码应仅更改第一个按钮的颜色，而不是其他按钮

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

所以任何人都可以帮我解决这个问题

Answer 1

你需要专门用$（this）引用元素，否则所有元素都带有类＆＃34; .btn＆＃34;会改变：

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

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

});

Answer 2

如果您需要指定具有相同类名的元素，则可以使用.eq()。 $("div.btn")将表示具有类<div>的所有btn元素。但是，如果您执行$("div.btn").eq(0)，则表示具有类<div>的第一个btn元素。同样，.eq(1)代表第二个元素，依此类推。

Answer 3

应该是这样的。

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

Answer 4

＆＃13;

$(document).ready(function(){
$(".btn").mouseover(function(){
$(this).css('color','red')
});
$(".btn").mouseleave(function(){
$(this).css('color','#000000')
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
   Button 1
</div>
<div class="btn">
   Button 2
</div>
<div class="btn">
   Button 3
</div>

＆＃13;

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

4 个答案: