当我有空格时，如何在悬停时保持可见？

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％

＆＃13;

＆＃13;

.user-data {
  position: relative;
  padding-bottom:1em;
}
.test {
  display: none;
  position: absolute;
  top: 100%;
  border: 1px solid black;
}
.user-data:hover .test {
  display: block;
      }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果两个div之间需要额外的间距，请将padding-top添加到子元素或padding-bottom添加到父元素。