CSS提示框在触发元素与内容间有间隙时移动鼠标会意外关闭

当鼠标从触发元素移向提示框（两者间存在间隙）时，提示框会因hover状态中断而意外关闭，以下是两种无需影响原有布局的解决方法：

方案1：用伪元素填充间隙（推荐） #

通过给触发元素添加透明伪元素覆盖间隙，让鼠标移动经过间隙时仍保持触发元素的hover状态，且不改变原有布局。

修改后的完整CSS：

.tooltip-container {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

.trigger-element {
  position: relative;
  margin-top: 20px;
}

/* hover时同时显示提示框和伪元素 */
.trigger-element:hover .tooltip-content,
.trigger-element:hover::before {
  display: block;
}

/* 伪元素覆盖触发元素与提示框的间隙 */
.trigger-element::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 30px; /* 与提示框的margin-bottom值一致，刚好覆盖间隙 */
  display: none;
  /* 调试时可打开背景色查看范围，上线后删除 */
  /* background-color: rgba(0,255,0,0.2); */
}

.tooltip-content {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  bottom: 100%;
  z-index: 1;
  margin-bottom: 30px;
  left: 0;
}

.tooltip-content .content {
  max-height: 20px;
}

同时修正HTML中的标签错误（原代码里</div>应为</span>）：

<div class="tooltip-container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quod
  adipisci, ratione, iusto neque alias tempora, asperiores vero nam
  molestiae consequatur enim facere eius? Veniam ducimus non temporibus
  laborum nostrum.
  <span class="trigger-element">Hover me
    <span class="tooltip-content">Tooltip content</span>
  </span>
</div>

原理 #

伪元素绝对定位在触发元素上方，高度等于间隙的30px，完全覆盖空隙。鼠标从触发元素移向提示框时，会先经过这个伪元素，而伪元素属于触发元素的一部分，因此hover状态不会中断，提示框保持显示。伪元素默认隐藏，仅在hover时生效，不占用布局空间，不会影响触发元素与其他文本的间距。

方案2：绑定父容器hover状态 #

将hover事件绑定到父容器.tooltip-container，确保鼠标在触发元素、提示框或间隙（若父容器范围覆盖）上时，提示框保持显示。

核心CSS修改：

/* 父容器hover时显示提示框 */
.tooltip-container:hover .tooltip-content {
  display: block;
}

.tooltip-content {
  display: none;
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  bottom: 100%;
  z-index: 1;
  margin-bottom: 30px;
  left: 0;
  pointer-events: auto; /* 确保提示框可接收鼠标事件 */
}

.trigger-element {
  position: relative;
  margin-top: 20px;
}

.tooltip-container {
  position: relative;
  display: inline-block;
  margin-top: 100px;
  /* 若间隙不在父容器范围内，可添加padding-top覆盖，但会影响布局 */
  /* padding-top: 30px; */
}

这种方法的局限性在于，如果父容器范围未覆盖间隙，鼠标经过间隙时hover状态仍会中断，此时需给父容器加padding，会改变原有布局，因此方案1更实用。

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