Changing the child element's CSS when the parent is hovered
Solution 1
Why not just use CSS?
.parent:hover .child, .parent.hover .child { display: block; }
and then add JS for IE6 (inside a conditional comment for instance) which doesn't support :hover properly:
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
Here's a quick example: Fiddle
Solution 2
No need to use the JavaScript or jquery, CSS is enough:
.child{ display:none; }
.parent:hover .child{ display:block; }
Solution 3
.parent:hover > .child {
/*do anything with this child*/
}
Solution 4
Use toggleClass()
.
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
where color
is the class. You can style the class as you like to achieve the behavior you want. The example demonstrates how class is added and removed upon mouse in and out.
Check Working example here.
Solution 5
Not sure if there's terrible reasons to do this or not, but it seems to work with me on the latest version of Chrome/Firefox without any visible performance problems with quite a lot of elements on the page.
*:not(:hover)>.parent-hover-show{
display:none;
}
But this way, all you need is to apply parent-hover-show
to an element and the rest is taken care of, and you can keep whatever default display type you want without it always being "block" or making multiple classes for each type.
Related videos on Youtube
Hartley Brody
Check out more of my writing at my hiking & backpacking blog, or find me on twitter.
Updated on August 08, 2021Comments
-
Hartley Brody almost 3 years
First of all, I'm assuming this is too complex for CSS3, but if there's a solution in there somewhere, I'd love to go with that instead.
The HTML is pretty straightforward.
<div class="parent"> <div class="child"> Text Block 1 </div> </div> <div class="parent"> <div class="child"> Text Block 2 </div> </div>
The child div is set to display:none; by default, but then changes to display:block; when the mouse is hovered over the parent div. The problem is that this markup appears in several places on my site, and I only want the child to be displayed if the mouse is over it's parent, and not if the mouse is over any of the other parents (they all have the same class name and no IDs).
I've tried using
$(this)
and.children()
to no avail.$('.parent').hover(function(){ $(this).children('.child').css("display","block"); }, function() { $(this).children('.child').css("display","none"); });
-
Hartley Brody about 13 yearsthat code isn't working for me. is it supposed to say ".parent.hover" and not ".parent:hover"?? case i've never seen what you have before. and doesn't a comma indicate multiple selectors taking the same styles? i don't see how that helps here. a little more info on that CSS, por favor 0=]
-
Lee about 13 years
:hover
is one of the "Dynamic pseudo-classes" defined by CSS2 (here's the spec). Here's a quick example: http://jsfiddle.net/5FLr4/. it works for me. -
Hartley Brody about 13 yearsahh thanks so much! i actually had some relative positioning that was pushing the child text out of view... doh! >.< i appreciate the help!
-
thdoan over 11 yearsApparently this won't work for .child::-webkit-scrollbar-thumb if you want to change the highlight of the scrollbar inside the child element.
-
Blair Connolly over 8 years
.parent:not(:hover) .child { display: none; }
seems to work well for me, though I'm certainly not worried about IE6. But this way I can use it on elements that I don't want to have a uniformdisplay
property. -
jenniwren over 4 yearsThis doesn't do what the question asked. It changes the border around the element that is hovered over. Not the border around a child element.
-
Marek Barta over 4 yearsIt does exactly what I'm looking for except its chaging all the child elements not only the one which is hovered over
-
Henrique Donati almost 4 years@MarekBarta why don't you just use the :hover on the child element then? What you are seeing is what was asked!
-
Yasser CHENIK about 2 yearsIf you still have any problems here is a demo