是否有可能不在:: before或:: after上触发：hover？

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，悬停时蓝色），您可以缩短div height并使用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>