jQuery的影響所有與同一類

Question

HTML元素的最後幾天，我工作的一個項目，現在在這個項目中，我有一個按鈕的邊欄這樣

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

另外，我有一些javascript對於像這樣的mouseenter事件代碼

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

現在問題是這個JavaScript代碼正在改變所有的元素與相同的類。我不想要它。我只想改變一個按鈕。

例如，如果的第一個按鈕懸停，JavaScript代碼應該改變所述第一按鈕的顏色只，而不是其他的按鈕

出於某種原因，我不能對這種情況下

使用CSS所以任何人都可以幫我解決這個問題

Answer 1

你需要用$（本），否則帶班的所有元素 「.btn」 特指元素將發生變化：

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

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

}); 

Answer 2

如果你需要指定具有相同類名的元素，你可以使用.eq()。 $("div.btn")將意味着所有類型爲btn的<div>元素。但是，如果您執行$("div.btn").eq(0)，則意味着第一個<div>元素與類btn。同樣，.eq(1)爲第二個元素，依此類推。

Answer 3

它應該是這樣的。

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

Answer 4

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

<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>