如何让div在悬停时可见，当我有空间时？

Question

我遇到悬停问题。当我试图徘徊孩子div它消失。

我想要这两个div之间的空间，就像我的小提琴一样。这是我的小提琴：

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

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

我的问题是，当我尝试悬停在“AAA”它消失，因为它有它和家长之间的空间，但我需要空间。

Answer 1

这是因为您的top:30px设置导致两个div之间存在差距。

改变，要顶：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>

如果您需要在两个div之间的额外空间，增加padding-top的子元素或padding-bottom父。