None None - 2 months ago 8
CSS Question

How to div stay visible on hover when i have space between?

I have problem with hover out. When I try to hover the child div it disappears.

I want space between these two div as in my fiddle. This is my fiddle :

https://jsfiddle.net/rc4tpug6/1/

<div class='user-data'>
bbbbb
<div class='test'>
aaaa
</div>
</div>


My problem is when I try to hover on "aaa" it disappear because it have space between it and the parent, but I need that space.

Answer

This is because there is a gap between the two divs caused by your top:30px setting.

Change that to top:100%

.user-data {
  position: relative;
  padding-bottom:1em;
}
.test {
  display: none;
  position: absolute;
  top: 100%;
  border: 1px solid black;
}
.user-data:hover .test {
  display: block;
      }
<div class='user-data'>
  bbbbb
  <div class='test'>
    aaaa
  </div>
</div>

If you require extra spacing between the two divs, add padding-top to the child element or padding-bottom to the parent.