Clever Geek Handbook

How to select one specific child when hovering parent using jquery?

I want to change the color of the child when the parent hovers. The problem is, with the code below, the child (label color) changes for all columns, and I only want it to change for that particular column. I guess I need to use 'this' in some way to make this work? Failed to get this to work so far.

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


source to share


5 answers


Why use jquery? This can be done with CSS:



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


source


Try the following:



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


source


Change it to work with the current hover of the element with this

:

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


source


Yes, you think it's good. 

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


source 


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

Using this you can select the currently active item

+1


source






More articles:


All Articles