是否可以不触发:悬停在::之前或::之后

Question

我正试图在CSS中实现一个自定义工具提示，它运行得很好，但我遇到了一个问题。目前，将鼠标悬停在工具提示上仍然可以打开工具提示，即使我没有将鼠标悬停于原始元素本身。

当然，我尝试过类似::before:hover {display:none;}的东西，但它不起作用，因为伪元素不会得到应用于它们的伪类。

我的下一个想法是简单地使工具提示不"占用"任何空间。使用负margin-bottom允许其他物质占据元素中的空间，就好像该元素不存在一样。然而，:hover伪类显然仍然适用于当时。

这是我想做的一个演示。我希望下面演示的工具提示不保持任何悬停状态。请注意，将工具提示文本移动到元素上方不是一个有效的解决方案，因为以蜗牛般的速度向上移动光标会导致跳过一些像素，这意味着工具提示会"捕捉"光标并在元素上保持:hover。

[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -2px;
transform: translateY(-100%);
background: white;
border: 1px solid black;
}

<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>

正如您所看到的，如果您将光标移动到div上，则会出现工具提示，如果您缓慢地向上移动光标，则工具提示将消失。然而，如果你把光标向上移动得稍微快一点，它就会跳过1像素的间隙，并保持光标悬停在div.上

现在我正在寻找一些应用于[data-tooltip]::before的样式，这样光标的悬停事件就不会在它上触发(或者至少不会在你看到工具提示的位置；如果我可以将它隐藏在[-1000，-1000]的某个位置，那也没关系(

---

所以，基本上，我的问题是，是否可以将css应用于元素，从而使:hover不应用于元素(的一部分(？我很乐意听取意见或建议。

Answer 1

不确定这是否是您想要的，但关于第一个问题(红色div，悬停时为蓝色(，您可以缩短divheight，并使用border-bottom来弥补丢失的高度：

div {
width: 100px;
height: 50px; /* instead of 100px */
background: red;
margin-bottom: -50px;
position: relative;
z-index: 1;
border-bottom: 50px solid red; /* adds 50px to divs apparent height, but ignored at hover */
}

Answer 2

在互联网上浏览了一段时间后，我终于找到了一个完美工作的解决方案。我以前并不知道这一点，但显然有一种pointer-events风格正是我想要的。它在SVG之外可接受的值是auto和none，但幸运的是，后者防止了所有悬停事件在::before伪元素上触发。

这里有一个演示：

[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
/*** this style prevents persistence of the tooltip when hovering over it ***/
pointer-events: none;
/* the rest is just the styles used in the question */
content: attr(data-tooltip);
position: absolute;
top: 0; /* changed from -2px to 0 so the effect is more clearly shown */
transform: translateY(-100%);
background: white;
border: 1px solid black;
}

<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>