show hidden child div without changing the size of parent div
Question
I have the following code:
function show() { document.getElementById("child").style.display = "block"; }
#parent { background-color: orange; padding: 2em; } #child { background-color: pink; padding: 3em; display: none; }
<div id="parent" onmouseover="show()"> <div id="child"> Child div </div> </div>
When I hover over the parent div, the size of the parent changes. Is there a way to show the child div above the parent div, without changing the size of the parent div?
3 answers
solution1
4 2015-05-20 17:49:50
You can use
visibility:hidden
in place of
display:none
To show/hide the content and keep the size unchanged. Need to change the script accordingly.
solution2
1 2015-05-20 17:49:57
You could use a relative position on your parent and an absolute position on the child elements:
function show() { document.getElementById("child").style.display="block"; }
#parent { background-color: orange; padding:2em; position:relative; } #child { background-color: pink; padding: 3em; display: none; position: absolute; }
<html> <head> <title></title> </head> <body> <div id="parent" onmouseover="show()"> <div id="child"> Child div </div> </div> </body> </html>
solution3
0 2015-05-20 18:19:26
Is this what you require http://jsfiddle.net/u74m4x9o/
<div id="parent" onmouseover="show()">
<div id="child">
Child div
</div>
</div>
function show() {
document.getElementById("child").style.display = "block";
}
#parent {
background-color: orange;
padding: 2em;
}
#child {
background-color: pink;
padding: 1em;
display: none;
position:absolute;
top : 1em
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to scale up parent div and show hidden child div on hover without affecting surrounding divs
Make any part of a child DIV opaque if it is outside of the area of the parent DIV without overflow:hidden
How to show a child div without changing the position of that element's siblings?
Show div outside its overflow hidden parent
Show and hide hidden div with parent onclick event
How to Hide parent DIV if all child Div are hidden (display:none)
How can I show the child div inside the parent div using javascript without triggering the others
Update child div's image size to never exceed parent div
Parent Div not adjusting size due to its child div
How to show the child div on mouse hover of parent div
Related Tags