主要问题是由圆形按钮引起的。但是我真的想要一个圆形按钮，这会导致悬停问题！我想要的是有一个圆形<a>按钮，当将鼠标悬停在该按钮上时，它将显示下面的另一个元素，例如div或另一个标签。这两个元素之间存在间隙。
然后，我应该能够将鼠标向下移动，并将鼠标悬停在显示的元素上，然后单击它或进行其他操作。但是，当然，如果您将鼠标悬停在原始位置上，<a>则另一个元素将消失，特别是因为两个元素之间存在间隙。这样做的最佳方法是什么，以便我可以将鼠标从元素1移动到元素2而在鼠标移动过程中元素2不消失？
理想情况下，这不需要JS。
到目前为止，我已经为此创建了一个基本设置：
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>这是我的旧解决方案尝试的解释：
我第一个阻止元素2在鼠标向下移动时消失的解决方案是在元素1和2之间放置一个不可见的可悬停元素，当鼠标向下移动时，元素2保持活动状态。如果所有元素都是矩形，这将很好用。但是我的元素1是循环的！
这意味着在中间悬停缓冲区元素和elem 1之间实际上只有一个接触像素，因为在elem 1和不可见的中间元素之间存在那些圆形的“角”间隙。因此，每当您将鼠标向下移动时，您仍将有99％的时间错过中间悬停元素。
而且您也不能将其放在elem 1后面以填充那些圆形“角”，因为圆形元素有一个边界框，您只能在inspect元素中看到它，并且此bbox阻止您用一个区域填充那些“角”实际上与鼠标交互的功能，因此使该解决方案无用。我的解释很混乱，但是如果您设法实现此“解决方案”，请尝试一下。
您可以使用伪元素轻松解决此问题，该元素将使可悬停区域更大并且仅在悬停时激活：
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
position:relative;
}
#myBtn:before {
content:"";
display:none;
position:absolute;
top:90%;
left:0;
right:0;
height:28px;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover::before {
display:block;
background:rgba(0,0,255,0.2); /* to illustrate */
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句