如何使用jquery在鼠标悬停在父元素时选择特定的子元素？

Question

当鼠标悬停在父元素上时，我希望更改子元素的颜色。问题是，使用以下代码后，所有列的子元素（标签颜色）都会更改，而我只想更改该特定列的子元素。我猜想我需要以某种方式使用'this'来使其工作？到目前为止，我还没有能够使其起作用。

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

- Stiño

Answer 1

为什么使用jQuery？这可以通过CSS完成：

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

- Guy

---

甚至不知道这可以用CSS如此简单地完成。谢谢！ - Stiño

Answer 2

试试这个：

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

- empiric

Answer 3

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

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

- Mathew Thompson

Answer 4

是的，你想得很好。

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

- bemol

Answer 5

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

通过使用这个，您可以选择当前活动的项目。

- PiX06