如何讓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父。