如何在這種情況下使用Javascript選擇器？

Question

我需要一個代碼，當你懸停.price-selector元素（我有4行）時，它應該改變.price選擇器的.price元素的顏色。但它會更改其他.price選擇框的所有.price元素。換句話說，我徘徊一件事，但改變了一切。如何解決我的代碼？

$('.price-selector') 
.on('mouseenter', function(){ $('.price').css({"background-color" : "red"});}) 
.on('mouseleave', function(){ $('.price').css({"background-color" : "black"}); }); 

Answer 1

您還沒有貼出你的代碼，所以我們不知道價格，選擇和它的價格之間的關係，但也可能，是這樣的：

$('.price-selector') 
.on('mouseenter', function(){ $(this).find('.price').css({"background-color" : "red"});}) 
.on('mouseleave', function(){ $(this).find('.price').css({"background-color" : "black"}); }); 

Answer 2

如果你只是想誰正在徘徊的人，你應該使用this。

$('.price-selector') 
    .on('mouseenter', function(){ 
     $(this).find('.price').css({"background-color" : "red"}); 
    }) 
    .on('mouseleave', function(){ 
     $(this).find('.price').css({"background-color" : "black"}); 
}); 

但是，這是非常低效的。你可以設置你的CSS自動爲你做這個。

.price-selector .price { 
    background-color: black; 
} 

.price-selector:hover .price { 
    background-color: red; 
}