多行span元素mouseout事件在行间空白触发导致hover状态闪烁的解决办法

问题核心是行内元素<span>的实际可交互范围仅包含文本内容，而line-height产生的行间空白不属于<span>的区域，鼠标移到空白处会触发mouseout，导致hover状态反复切换闪烁。以下是几种可行的解决方案：

方案1：CSS原生:hover+调整元素显示方式（最简最优） #

直接用CSS的:hover伪类实现效果，同时修改<span>的display属性，让它占据整个行高区域：

HTML（无需修改） #

<p>
  Nevererr is this principleasd more pertinent than when dealingasd with type, the bread and butter of Web-borne communication. A well-set paragraph of text is not supposed to wow the reader;
  <span>
                the wowing should be left to the idea or observation for which the paragraph is a vehicle. In fact, the perfect paragraph is unassuming to the point of near invisibility. That is not to say that the appearance of your text should have no appeal at all.
            </span> On the contrary: well-balanced, comfortably read typography is a thing of beauty; it’s just not the arresting sort of beauty that might distract you from reading. asd.
</p>

CSS代码 #

/* hover样式 */
span:hover {
  background-color: red;
  color: white;
}

/* 关键：让span占据整个行高，消除行间空白的触发问题 */
span {
  display: inline-block;
  line-height: inherit;
}

原理：inline-block让<span>继承父元素的line-height，垂直方向覆盖整个行框高度，鼠标移到行间空白时仍处于<span>的交互范围内，不会触发hover状态切换。

方案2：JS事件替换为mouseenter/mouseleave（保留JS逻辑场景） #

如果必须通过JS控制hover状态，替换mouseover/mouseout为mouseenter/mouseleave，这两个事件仅在鼠标完全进入/离开元素边界时触发，不会因元素内部空白或子元素误触发：

JS代码 #

const spans = document.querySelectorAll('span');
spans.forEach(span => {
  span.addEventListener('mouseenter', () => {
    span.setAttribute('hovered', 'true');
  });

  span.addEventListener('mouseleave', () => {
    span.setAttribute('hovered', 'false');
  });
});

配合CSS调整 #

同样需要给<span>添加以下样式，确保行间空白属于<span>的交互区域：

span {
  display: inline-block;
  line-height: inherit;
}

span[hovered='true'] {
  background-color: red;
  color: white;
}

方案3：伪元素填充行高空白（兼容旧布局场景） #

如果不想修改<span>的display属性，可通过伪元素填充行高区域，扩大hover触发范围：

CSS代码 #

span[hovered='true'] {
  background-color: red;
  color: white;
  position: relative;
}

/* 伪元素填充整个行高，作为hover触发区域 */
span::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

原理：绝对定位的伪元素会覆盖<span>所在行的整个垂直空间，鼠标移到行间空白时，实际是在伪元素上，不会触发mouseout事件，避免闪烁。

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