使用 jQuery 或 CSS 将光标悬停在伪元素上时隐藏伪元素答案

【问题标题】：Hide pseudo element when cursor is over it with jQuery or CSS使用 jQuery 或 CSS 将光标悬停在伪元素上时隐藏伪元素
【发布时间】：2020-12-30 12:07:24
【问题描述】：

我正在处理显示 Scheme 函数名称帮助屏幕的工具提示。但是我希望当光标位于名称范围之外时隐藏工具提示，这也意味着当我将鼠标悬停在 ::before 伪元素上时。

.token.__doc__ {
    cursor: help;
    position: relative;
    font-family: monospace;
}
.token.__doc__:hover::before {
    display: block;
    content: attr(data-doc);
}
.token.__doc__::before {
    position: absolute;
    top: var(--top, 100%);
    left: calc(var(--left, 0) * 1px);
    z-index: 400;
    width: 85ch;
    background: var(--color, #ccc);
    color: var(--background, #000);
    white-space: pre;
    padding: 5px;
}

<span style="font-weight: bold;" class="token keyword __doc__" data-text="let" data-doc="(let ((a value-a) (b value-b)) body)

Macro that creates new environment, then evaluate and assign values to
names and then evaluate the body in context of that environment.
Values are evaluated sequentially but you can't access
previous values/names when next are evaluated. You can only get them
from body of let expression."><span>let</span></span>

当您将鼠标悬停在 CSS 中时，有什么方法可以隐藏帮助工具提示？还是 jQuery 和计算 x/y 位置是唯一的方法？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

pointer-events:none 在伪元素上

.token.__doc__ {
    cursor: help;
    position: relative;
}
.token.__doc__:hover::before {
    display: block;
    content: attr(data-doc);
}
.token.__doc__::before {
    position: absolute;
    top: var(--top, 100%);
    left: calc(var(--left, 0) * 1px);
    z-index: 400;
    width: 85ch;
    background: var(--color, #ccc);
    color: var(--background, #000);
    white-space: pre;
    padding: 5px;
    pointer-events:none
}

<span style="font-weight: bold;" class="token keyword __doc__" data-text="let" data-doc="(let ((a value-a) (b value-b)) body)

Macro that creates new environment, then evaluate and assign values to
names and then evaluate the body in context of that environment.
Values are evaluated sequentially but you can't access
previous values/names when next are evaluated. You can only get them
from body of let expression."><span>let</span></span>

【讨论】：