html - 当我之间有空间时，如何让 div 在悬停时保持可见？

Question

我有悬停问题。当我尝试悬停子 div 时，它消失了。

我想要这两个 div 之间的空间，就像我的 fiddle 一样。这是我的 fiddle :

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

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

我的问题是，当我尝试将鼠标悬停在“aaa”上时，它会消失，因为它和父级之间有空间，但我需要那个空间。

Answer 1

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

将其更改为 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>

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