Как вызвать CSS, когда курсор находится в пределах определенного c пиксельного расстояния от элемента HTML

Question

Я хотел бы знать, существует ли эффективный способ запуска анимации CSS, когда курсор находится рядом с элементом HTML. Например, Squarespace анимирует маркер внизу каждого поля, когда вы находитесь на определенном расстоянии от каждого угла контейнера:

Обратите внимание на то, как курсор появляется в углу когда я отхожу на определенное расстояние, независимо от того, в каком направлении движется мой курсор? Это заставляет меня поверить, что это не просто стиль .parent-container:hover > .child-element CSS. Должно быть с Javascript.

Я обнаружил, что вы можете воссоздать это поведение, подключив mousemove слушатель событий к каждому элементу, который вы хотите анимировать, отслеживая разницу между положением мыши и положением элемента следующим образом:

@HostListener('document:mousemove', ['$event'])
mousemoveFn(ev: MouseEvent) {

 // perform code to calculate distance between cursor position and
 // the element the listener is attached to
 // returns a boolean if the cursor is "near by" element or not

}

Этот код был взят из этой директивы npm Angular

Проблема в том, что мне нужно иметь несколько таких событий анимации близости на моей странице, и я уже вижу огромные хиты производительности с 10 mousemove слушателями событий, которые срабатывают на каждом requestAnimationFrame(). Итак, очевидно, что это не лучший маршрут.

У кого-нибудь есть предложения по более производительному / элегантному решению, которое бы обеспечивало sh подобное CSS анимационное поведение?

---

EDIT

Я полагал, что они использовали JS для запуска анимации, потому что я отслеживал движение с помощью вкладки Performance на Chrome и видел следующий обработчик событий mousemove, за исключением того, что, похоже, есть WAY меньше вызовов на событие mousemove по сравнению с моей реализацией. Возможно, есть глобальный слушатель мышиного движения?

Answer 1

Использование обертки для этого элемента с отступом, вероятно, то, что используется в вашем примере. Вот простой пример, чтобы получить идею:

div {
  padding: 20px 50px;
}

div:hover p {
  background-color: red;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 2

Возможно, вокруг этого элемента есть невидимый элемент div, который изменяет элемент при наведении на него.

div#s {
  position:relative;
  margin: 20px;
}

p {
  width: fit-content;
}

div#h{
  position: absolute;
  background: #0000000f;
  height: 100px;
  width: 100px;
  top: -50px;
  left: -50px;
}

div#h:hover + p {
  background: red;
}

<div id="s"><div id="h"></div><p>X</p></div>