时间戳

首页 > 解决方案 > 是否可以不触发：悬停在 ::before 或 ::after 上？

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

问题描述

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

标签： htmlcsscss-selectorshovertooltip

解决方案

不确定这是否是您要寻找的，但关于第一个问题（红色 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 */
}

推荐阅读