是否可以不触发 :hover on ::before 或 ::after？

Question

我正在尝试在 CSS 中实现自定义工具提示，它工作得相当不错，但我运行遇到了问题。目前，将鼠标悬停在工具提示上仍会保持工具提示打开，即使我没有将鼠标悬停在原始元素本身上。

当然，我已经尝试过 ::before:hover {display:none;} 之类的方法，但这不起作用，因为伪元素没有应用伪 classes。

我的下一个想法是简单地使工具提示不 "take up" 任何 space。使用负数 margin-bottom 允许其他内容占据元素中的 space ，就好像该元素不存在一样。然而，:hover伪class显然仍然适用。

这是我想做的事情的演示。我想让以下演示的工具提示不保持任何悬停状态。请注意，将工具提示文本移动到元素上方的更高位置不是一个可行的解决方案，因为向上移动光标的速度比蜗牛的速度快会导致跳过一些像素，这意味着工具提示 'catches' 光标并保持 :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，悬停时为蓝色），您可以缩短 divs 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>

是否可以不触发 :hover on ::before 或 ::after？

Is it possible to not trigger :hover on ::before or ::after?

html

css

tooltip

hover

css-selectors