この状況でJa​​vascriptセレクタを使用するには？

Question

私はコードを必要とする.price-selector要素（私は4行を持っている）をホバリングすると、ホバリングしている.priceセレクタの.price要素の色が変わるはずです。しかし、それは他の.price-selectorボックスのすべての.price要素を変更します。言い換えれば、私は1つのことを浮かべるが、すべてを変える。私のコードをどのように修正できますか？

$('.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; 
}