是否可以不触发：悬停在 ::before 或 ::after 上？答案

【问题标题】：Is it possible to not trigger :hover on ::before or ::after?是否可以不触发：悬停在 ::before 或 ::after 上？
【发布时间】：2020-08-08 06:57:21
【问题描述】：

我正在尝试在 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 不适用于（部分）元素？我很想听听想法或建议。

【问题讨论】：

如果我能以某种方式获得（部分）不触发:hover 的元素，那么我可以将这些样式应用于::before，这将解决我的问题。另外，正如我在问题中提到的，我特别想解决它，而不必在 div 顶部覆盖一些其他元素。在工具提示示例中，我不能在工具提示上叠加其他元素，否则它将不可见。
@MrLister 为了清楚起见，我删除了第一个示例，因为它可能只是分散了实际问题的注意力。
好的，我删除了我的评论。

标签： html css css-selectors hover tooltip

【解决方案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 */
}

【讨论】：

好的，显然问题的第一部分在此期间得到了编辑。但也许该方法仍然可以应用，即使用border 使div 占用所需的空间，同时避免在该空间中触发:hover。
最终不是我想要的，但这是一个很好的寻找可能性的方法，谢谢！

【解决方案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>

【讨论】：