如何阻止提示框区域触发悬浮效果，仅在绑定元素hover时显示？

这问题我之前做项目时也踩过坑！你现在的问题根源在于：用:before生成的Tooltip是绑定元素（也就是那个红色div）的伪元素，它属于父元素的一部分。所以当鼠标移到Tooltip本身上时，浏览器依然认为你还在悬停父元素，导致Tooltip一直显示。

最直接的解决方案是给Tooltip伪元素添加pointer-events: none属性，让它完全忽略鼠标交互——这样鼠标移到Tooltip上时，就相当于“穿过”它，浏览器会判定鼠标不在父元素的悬停范围内，Tooltip自然就会消失。

修改后的CSS代码如下：

[tooltip]:before { 
  content: attr(tooltip); 
  position: absolute; 
  opacity: 0; 
  right: 0; 
  top: 110%; 
  z-index: 9999; 
  color: #ffffff; 
  background: #333333; 
  padding: 10px; 
  transition: all 0.5s ease; 
  pointer-events: none; /* 关键新增代码 */
}
[tooltip]:hover:before { opacity: 1; }
[tooltip] { position: relative; }
/* other stuff */
#container { width: 150px; height: 50px; background: red; }

对应的HTML不用改动：

<div id="container" tooltip="Tooltip">Div with tooltip</div>

测试一下：现在只有当鼠标悬停在红色的div上时，Tooltip才会出现；一旦鼠标移到Tooltip上或者离开div，Tooltip就会立即消失，完全符合你的需求。

如果之后你需要Tooltip能响应鼠标事件（比如点击、悬停Tooltip本身做其他效果），可以再调整逻辑，但这个方案是当前问题最简洁高效的解决办法。

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