Можно ли не запускать: hover on :: before или :: after?

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

Посмотрев некоторое время на inte rnet, я наконец нашел решение, которое работает без нареканий. Я действительно не знал об этом раньше, но, очевидно, есть стиль 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>