如何在这种情况下使用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; 
}