圆形按钮与间隙元素的hover状态保留问题（求无JS解决方案）

你遇到的问题确实戳中了CSS的一个小坑：圆形按钮的视觉形态和实际可交互边界盒不匹配——按钮看起来是圆形，但浏览器识别的可交互区域还是原来的矩形，这直接导致你之前尝试的缓冲元素方案失效：鼠标移动时会先触发按钮的矩形边界盒，根本无法命中中间的缓冲元素，进而导致下方元素直接消失。

下面是两个纯CSS的解决方案，完全不需要JavaScript，同时能完美保留圆形按钮的样式：

方案一：用伪元素填充间隙（无需修改HTML结构） #

核心思路是给圆形按钮添加一个不可见的伪元素，让它填充按钮到下方元素的空隙，这样鼠标从按钮移动到下方元素的过程中，始终处于按钮的hover触发范围内。

完整代码 #

<a id="myBtn" href="/"> button </a>
<a id="hoverInfo" href="/">hover info</a>

body { padding: 30px; height: 100vh; }

#myBtn {
  background-color: grey;
  padding: 20px;
  border-radius: 50%;
  /* 开启相对定位，让伪元素基于按钮定位 */
  position: relative;
  /* 确保按钮在伪元素上方，不影响视觉 */
  z-index: 1;
}

/* 创建填充间隙的伪元素 */
#myBtn::after {
  content: "";
  position: absolute;
  /* 从按钮底部开始向下延伸 */
  top: 100%;
  /* 水平居中对齐下方元素 */
  left: 50%;
  transform: translateX(-50%);
  /* 宽度和下方元素一致，保证过渡路径全覆盖 */
  width: 100px;
  /* 高度等于按钮和下方元素的间隙大小（这里是40px） */
  height: 40px;
  /* 透明背景，不影响页面视觉 */
  background: transparent;
}

#hoverInfo {
  display: none;
  margin-top: 40px;
  background-color: green;
  width: 100px;
  height: 50px;
  /* 让下方元素水平居中，和伪元素对齐 */
  margin-left: auto;
  margin-right: auto;
}

/* 保留原hover逻辑，伪元素属于按钮，hover状态会自动延续 */
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
  display: block;
}

原理说明 #

伪元素#myBtn::after是按钮的一部分，它填充了按钮和#hoverInfo之间的空隙。当鼠标从圆形按钮移动到下方元素时，会先经过这个伪元素，此时按钮的hover状态不会中断，#hoverInfo会一直保持显示，直到鼠标完全离开#hoverInfo。

方案二：用父容器包裹（结构更清晰） #

如果觉得伪元素的方式不够直观，也可以把按钮和下方元素放在同一个父容器里，通过扩展父容器的可交互区域来实现过渡。

完整代码 #

<div class="btn-group">
  <a id="myBtn" href="/"> button </a>
  <a id="hoverInfo" href="/">hover info</a>
</div>

body { padding: 30px; height: 100vh; }

.btn-group {
  display: inline-block;
  text-align: center;
  /* 给容器添加底部内边距，覆盖按钮到下方元素的间隙 */
  padding-bottom: 40px;
}

#myBtn {
  background-color: grey;
  padding: 20px;
  border-radius: 50%;
}

#hoverInfo {
  display: none;
  margin-top: 40px;
  background-color: green;
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
}

/* 通过父容器的hover触发下方元素显示 */
.btn-group:hover #hoverInfo, #hoverInfo:hover {
  display: block;
}

原理说明 #

父容器的padding-bottom把可交互区域延伸到了下方元素的位置，只要鼠标在父容器范围内（包括间隙区域），就会触发hover状态，#hoverInfo会保持显示，完美解决过渡消失的问题。

内容的提问来源于stack exchange，提问作者bitclip