Может ли кто-нибудь предложить элегантное решение для ховера?

Question

[Spaceoddity]

В общем случае надо отслеживать ховер только на паддинге. В принципе поверх паддинга можно кинуть любой блок, но тогда он будет перехватывать события (у изначального блока тоже есть обработчики событий).
Для иллюстрации и поиграться - https://codepen.io/nanto-work/pen/BbGZMb
Так вот, нужно точно такое же поведение, кроме того, что ховер на красном квадрате не должен работать.
Ну и не думаю что будут уместны какие-то "тяжеловесные решения", вроде отслеживания координат.

Answer 1

[0xD34F]

pointer-events: none для #box и pointer-events: all для :before и button

Comments

[Spaceoddity]

А если так?
https://codepen.io/nanto-work/pen/BbGZMb

[DanKud]

Spaceoddity, тоже самое:
pointer-events: none; для элемента #box и pointer-events: all; для дочерних элементов.

[Spaceoddity]

Хм... Да, кажется это должно решать задачу. На самом деле, код у меня сложнее и, возможно, какие-то события привязаны непосредственно к блоку, надо посмотреть... Но приём очень перспективный.
P.S. На CSS потихоньку перекладывают все больше и больше возможностей JS.

[jeruthadam]

Spaceoddity, этому свойству сто лет в обед