Question

我需要一个代码，当你悬停.price-selector元素（我有4行）时，它应该改变那个悬停的.price选择器的.price元素的颜色。但它改变了其他.price-selector框的所有.price元素。换句话说，我徘徊一件事，但改变了一切。如何修复我的代码？

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

Answer 1

如果您只想要当前正在徘徊的人，则应使用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;
}

Answer 2

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

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

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

2 个答案: