如何使用jquery悬停父项时选择一个特定的子元素？

Question

我想在悬停父项时更改子元素的颜色。问题是，使用下面的代码时，子元素（标签颜色）会更改为所有列，而我只希望它针对该特定列进行更改。我想我需要以某种方式使用“这个”来完成这项工作？到目前为止还没有能够得到这个工作。

jQuery('.col-proposal').hover(function() { 
jQuery('.col-proposal .label').css('color', 'green'); 
}, function() { 
jQuery('.col-proposal .label').css('color', 'white'); 
}); 

Answer 1

为什么要用jQuery？这可以用CSS来实现：

.col-proposal:hover .label { 
    color: white; 
} 

Answer 2

将其更改为使用this在当前悬停项目工作：

jQuery('.col-proposal').hover(function() { 
    $(this).find('.label').css('color', 'green'); 
}, function() { 
    $(this).find('.label').css('color', 'white'); 
}); 

Answer 3

是的，你觉得好。

jQuery('.col-proposal').hover(function() { 
    jQuery('.label', this).css('color', 'green'); 
}, function() { 
    jQuery('.label', this).css('color', 'white'); 
}); 

Answer 4

jQuery('.col-proposal').hover(function() { 
    jQuery(this).find('.label').css('color', 'green'); 
}, function() { 
    jQuery(this).find('.label').css('color', 'white'); 
}); 

通过使用此，您可以选择当前活动项目

Answer 5

试试这个：

$('.col-propsal').hover(function(){ 
    $(this).find('.label').first().css('color', 'green'); 
    // OR 
    $(this).closest('.label').css('color', 'green'); 
    //OR 
    $(this).children('.label').css('color', 'green'); 
}, function(){ 
    .... 
});