在这种情况下如何使用Javascript选择器？

我需要一个代码，当您悬停.price选择器元素（我在第行有4个）时，它应该更改悬停的.price选择器的.price元素的颜色。但它改变了其他价格选择器框的所有.price元素。换句话说，我只停留在一件事上，但改变了一切。如何修复我的代码

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

---

如果您只想要当前处于悬停状态的人，则应使用

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

---

您尚未发布代码，因此我们不知道价格选择器与其价格之间的关系，但可能类似于：

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

---

使用此关键字或使用CSS根据HTML的结构，CSS选择器可能会有所不同。在

.find（'price'）

上有很好的理解。我错过了那张支票。