如何使用JavaScript检测光标是否直接悬停在实际文本上方

这个功能完全可以实现，核心是绕开块级元素默认矩形盒模型的事件响应逻辑，不要直接依赖块容器自带的hover判定。

• 为什么默认方案不行：div/p/blockquote这类块级元素的事件响应范围是自身整个矩形盒区域，自然会把行尾留白、段落末尾空白、内边距区域都包含在内，直接给这类元素绑hover事件必然会出现空白区域误触发的问题。

方案1：逐行内联包裹（兼容性最优） #

内联元素（display: inline）的事件响应范围只会覆盖自身实际渲染的内容区域，不会占满整行的剩余宽度，利用这个特性就能实现精准触发：

1. 将目标段落的文本按实际渲染的换行位置，逐行用<span>标签包裹，span保持默认的内联显示模式，不要改成块级/行内块
2. 将需要的hover修改效果绑定在这些span上，而非外层块容器

示例代码：

<style>
.text-line:hover {
  color: #d32f2f;
  /* 此处写需要触发的样式修改效果 */
}
</style>
<blockquote>
  <span class="text-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <span class="text-line">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</blockquote>

如果是动态渲染的文本，不需要手动拆分换行，可以通过JS的Range API自动识别每一行的文本范围，动态生成包裹的span，窗口尺寸变化时重新计算即可。

方案2：光标位置检测（无DOM侵入） #

如果不想改动原有DOM结构，可以直接通过浏览器API检测鼠标当前位置是否落在文本节点上，不需要拆分元素：

1. 给外层目标容器绑定mousemove事件，实时获取鼠标的视口坐标
2. 调用document.caretRangeFromPoint（Webkit内核浏览器）/document.caretPositionFromPoint（火狐浏览器），传入鼠标坐标拿到当前位置对应的DOM节点
3. 判断返回的节点是否为容器内的文本节点，是则添加效果类名，否则移除

核心逻辑代码：

const target = document.querySelector('blockquote p');
target.addEventListener('mousemove', (e) => {
  const range = document.caretRangeFromPoint(e.clientX, e.clientY);
  const hitText = range?.startContainer.nodeType === Node.TEXT_NODE && target.contains(range.startContainer);
  target.classList.toggle('text-hover', hitText);
});

// 鼠标移出容器时记得移除效果
target.addEventListener('mouseleave', () => target.classList.remove('text-hover'));

.text-hover {
  color: #1976d2;
  /* 此处写需要触发的样式修改效果 */
}

这个方案不需要调整原有DOM结构，也不需要额外处理排版变化，现代浏览器全支持，是优先推荐的实现方式。

避坑提示 #

• 不要尝试通过给外层容器设置pointer-events: none再给文本开pointer-events实现，文本本身是节点内容不是独立元素，这个方法没法单独把文本的响应区域抠出来
• 如果文本中混有图片、行内按钮等其他元素，只需要在节点判定逻辑里加上对应元素的判断规则即可，两种方案都能正常适配
• 不要通过计算文本宽度手动判断鼠标位置，不同字体、字重、缩放比例下计算误差会非常大，直接用浏览器原生API的判定结果最准确

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