如何用CSS或jQuery实现悬停伪元素时隐藏Scheme函数提示框？

好消息是你完全可以用纯CSS解决这个问题，不需要借助jQuery计算坐标！

问题根源 #

当前的问题在于：伪元素::before是父元素.token.__doc__的一部分，默认情况下，即使鼠标悬停在伪元素（提示框）上，父元素的:hover状态仍然会保持，所以提示框不会消失。而你的需求是当鼠标移出包含函数名的span元素时隐藏提示框，包括悬停在伪元素上的情况，我们只需要一个简单的CSS属性就能解决。

解决方案 #

给伪元素添加pointer-events: none属性，这个属性会让伪元素不捕获任何鼠标事件。这样当鼠标移到提示框上时，浏览器会认为鼠标已经离开了父元素的可交互区域，父元素的:hover状态自动结束，提示框就会隐藏。

修改后的完整CSS代码：

.token.__doc__ { cursor: help; position: relative; font-family: monospace; }
.token.__doc__:hover::before { display: block; content: attr(data-doc); }
.token.__doc__::before { 
  position: absolute; 
  top: var(--top, 100%); 
  left: calc(var(--left, 0) * 1px); 
  z-index: 400; 
  width: 85ch; 
  background: var(--color, #ccc); 
  color: var(--background, #000); 
  white-space: pre; 
  padding: 5px;
  pointer-events: none; /* 关键新增属性 */
}

效果验证 #

• 当鼠标悬停在函数名（比如示例中的let）所在的span上时，提示框正常显示；
• 当鼠标移开这个span（不管是移到页面空白处，还是移到提示框上），提示框都会立即隐藏，完全符合你的需求。

额外说明 #

如果之后你想要实现鼠标移到提示框上时，提示框仍然保持显示的效果，那纯CSS就无法做到了（因为伪元素无法单独触发:hover状态），这时候才需要使用JS监听鼠标事件来判断位置。但根据你当前的需求，纯CSS已经足够解决问题。

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