Question

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

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

试试这个：

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

Answer 3

使用this：

将其更改为当前悬停的项目

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

Answer 4

是的，你认为好。

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

Answer 5

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

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

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

5 个答案: