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
Stijn
source
to share
5 answers
Why use jquery? This can be done with CSS:
.col-proposal:hover .label {
color: white;
}
+4
Guy
source
to share
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
empiric
source
to share
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
mattytommo
source
to share
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
bemol
source
to share
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
PiX06
source
to share