Html 当圆形按钮和下拉菜单之间有间隙时，保留下拉菜单悬停

主要问题是由于按钮是圆形的。但我真的想要一个圆形按钮，这会导致悬停问题！ 我只想要一个循环

---

首先想到的解决方案是将圆形按钮包装到父div中，这将是激活悬停效果的div。这样，您可以添加填充底部以模仿间隙外观，同时仍使“间隙区域”触发悬停效果。在下面的代码片段中，我将包装器div设置为红色背景，这样您就可以看到它是如何工作的。如果删除红色背景，它应按预期工作

正文{
填充：30px；
高度：100vh；
}
.钮扣敲击器{
显示：内联块；
边缘底部：40px；
背景：红色；
}
#myBtn{
背景颜色：灰色；
填充：20px；
边界半径：50%；
}
#悬停信息{
显示：无；
背景颜色：绿色；
宽度：100px；
高度：50px；
}
.ButtonRapper:hover+#hoverInfo，
#悬停信息：悬停{
显示：块；
}
.ButtonRapper:悬停{
保证金：0；
填充底部：40px；
}

---

您可以使用伪元素轻松解决此问题，伪元素将使可悬停区域变大，并且仅在悬停时激活：

正文{
填充：30px；
高度：100vh；
}
#myBtn{
背景颜色：灰色；
填充：20px；
边界半径：50%；
位置：相对位置；
}
#myBtn：以前{
内容：“；
显示：无；
位置：绝对位置；
最高：90%；
左：0；
右：0；
高度：28px；
}
#悬停信息{
显示：无；
边缘顶端：40px；
背景颜色：绿色；
宽度：100px；
高度：50px；
}
#myBtn:悬停：：之前{
显示：块；
背景：rgba（0,0255,0.2）；/*用于说明*/
}
#myBtn:hover+#hoverInfo，#hoverInfo:hover{
显示：块；
}

谢谢。尽管如此，这个实现仍然存在一个大问题：红色区域始终处于活动状态，即使我根本没有悬停在任何东西上。这实际上意味着（当红色区域不可见时）按钮基本上更大，但有一半是不可见的。红色区域是否可能仅在按钮悬停在上方时才处于活动状态，就像我希望显示的原始元素一样？我不能只将红色区域设置为显示：无，因为这样效果会级联到每个元素。（尽管可能有办法？）与其设置红色区域的“显示”属性，不如更改大小，使其不再大于按钮？有趣的是，Keara，我对代码进行了进一步修改，使红色区域以边距而不是填充开始（因此不可悬停），但在按钮悬停时，将边距切换为填充，使其可悬停。但这种效果仅在悬停按钮时持续，而在悬停信息框时不持续。如果你想让红色区域即使在信息上也能保持悬停的话，可以稍微调整一下。我试着将大小保持在零，然后调整悬停按钮的大小，但是这造成了严重的定位问题，因此产生了另一个需要解决的问题，一个又一个。一切都变得非常复杂，太快了。我认为CSS在本质上只是级联的局限性是这里的问题，因为我试图控制一切。相反，我选择了Temani的答案，这个答案更简单，效果也更好，只有一个很小的例外，中间的缓冲区是用：：before创建的，因此按钮本身的一部分是悬停的。价格很低，很好用，谢谢！我相信这是最好的解决办法。唯一的问题是：：before区域是按钮本身的一部分，所以您可以单击它作为链接。这是一个简单的代价。