Menu
I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks
471
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Like last time, you must know the width and height of the element you want to center. Set the position property of the parent element to relative . Then set the child's position property to absolute , top to 50% , and left to 50% . This just centers the top left corner of the child element vertically and horizontally.
To get the parent node of an HTML element, you can use the parentNode property. This property returns the parent node of the specified element as a Node object. The parentNode property is read-only, which means you can not modify it.
If You want to get list only children elements with id or class, avoiding elements without id/class, You can use document. getElementById('container'). querySelectorAll('[id],[class]'); ... querySelectorAll('[id],[class]') will "grab" only elements with id and/or class.
Using jQuery you can add a mouseover event to the parent div, and show the child div. See this fiddle as an example. Show activity on this post. Since it's a child element you don't need javascript.
In addition to the accepted answer, one can use opacity so that layout is not jumping around on hover (this also allows to animate the appearance): Show activity on this post. Using jQuery you can add a mouseover event to the parent div, and show the child div. See this fiddle as an example.
It is possible to style the parent element when hovering a child element, although there isn’t any existing CSS parent selector. We’ll demonstrate and explain an example where we have a “Select” button and want to highlight the element when hovering the button.
Add :hover to the <section> tag and specify the background property. Set :hover to the <p> element inside the <section> tag. Set the position to “absolute” and specify the bottom for the <button> element inside the <div> tag.
No JS required.
.hidden { display: none; } .parent:hover .hidden { display: block; }<div class="parent"> <p>Hello, I'm a child...</p> <p class="hidden">..and so am I but I'm hidden.</p> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
