CSS: пропускание кликов через div, реагирующий на hover

Быстрый ответ

Чтобы эмулировать действие pointer-events:hoverOnly, можно прибегнуть к помощи JavaScript для добавления отдельного класса во время наведения курсора. В этом случае нам помогут обработчики событий mouseenter и mouseleave. Определённый в CSS класс будет содержать свойство pointer-events: none;, блокирующее взаимодействие до момента наведения курсора.

Пример кода на JavaScript:

element.onmouseenter = () => element.classList.add('hover-only');
element.onmouseleave = () => element.classList.remove('hover-only');

CSS-правило:

.hover-only { pointer-events: none; }

Так, pointer-events сработает только при наведении.

Как достичь взаимодействия только при наведении курсора

Комбинация CSS-псевдоклассов :hover и :active, в сочетании со свойством pointer-events, позволяет создать эффект, при котором взаимодействие возможно только во время указания курсором. Организуйте HTML и CSS так, чтобы элементы эффективно дополняли друг друга.

Поддержка со стороны CSS:

.layer1 {
  pointer-events: auto;
}

.layer2 {
  pointer-events: none;
  transition: opacity 0.4s ease;
  opacity: 0; /* Изначально невидим */
}

.layer1:hover + .layer2 {
  pointer-events: auto; /* реагирует на взаимодействие при наведении */
  opacity: 1; /* И он видим! */
}

В этом случае предполагается, что .layer2 будет находиться поверх .layer1. Как только будет выполненно наведение на .layer1, элемент .layer2 становится видимым и доступным для взаимодействия.

Профессиональное применение наведения в JavaScript и работа со сложными структурами

Достигаем большего с помощью JavaScript

Временами, CSS может оказаться недостаточным, и требуется применить JavaScript для обеспечения большей гибкости и добавления новых функций.

JavaScript-код для усиления эффекта:

$('#layer1').hover(
  function() {
    // Делаем layer2 более видимым, словно шпинат для Попая!
    $('#layer2').css({ 'pointer-events': 'auto', 'opacity': '1' });
  }, function() {
    // Вдруг layer2 исчезает, как мотивация в понедельник!
    $('#layer2').css({ 'pointer-events': 'none', 'opacity': '0' });
  }
);

Данный сценарий использует jQuery для переключения pointer-events, к тому же обеспечивает плавный переход. Помните о transition-delay, что позволит избегать мигания.

Подробнее об этом расскажет наш спикер на видео

Продвинутые методы для работы со сложными структурами

При работе со слоями используйте CSS-селекторы и обращайтесь к родительским и дочерним элементам в JavaScript, чтобы добиться желаемого поведения элементов.

Проверьте совместимость

Не забывайте о необходимости проверки совместимости в браузерах свойства pointer-events. Ресурсы типа Can I use… помогут отслеживать текущую поддержку. Это важно для обеспечения доступа пользователей со старыми браузерами к вашим взаимодействиям при наведении.

Визуализация

Чтобы лучше понять pointer-events в контексте наведения и взаимодействия:

Представьте щит, который обычно позволяет проходить сквозь себя, но становится твёрдым при приближении руки:

| CSS свойство              | Вид взаимодействия | Поведение щита                          |
| ------------------------- | ----------------   | ---------------------------------------- |
| `pointer-events: auto`    | 🖐️ Касание и наведение| 🛡️ Щит активен                      |
| `pointer-events: none`    | 🚫 Без взаимодействия  | 🌬️ Рука проходит сквозь                |

В идеальном мире pointer-events:hoverOnly вело бы себя так:

| `pointer-events:hoverOnly` (воображаемое)| 🖐️ Только наведение  | 🪁 Щит становится твёрдым при приближении, не касаясь |

Хотя в реальности такое поведение не существует, мы можем приблизиться к его моделированию при помощи JavaScript с помощью дynamicкой настройки.

Советы по улучшению интерактивности

Размышления дизайнера при наведении

• Задайте свойства width и height интерактивным слоям, чтобы обеспечить стабильность поведения.
• Использование z-index поможет вам установить необходимую иерархию.
• Убедитесь, что интерактивный контент доступен не только при наведении.

JavaScript и обработка событий

• Организуйте обработчики событий мыши так, чтобы минимизировать ненужные манипуляции с DOM.
• Используйте дебаунсинг для обработки большого числа событий наведения без потери в производительности.

Использование псевдоклассов

• Комбинируйте :hover с :focus и :active для оптимальной поддержки сенсорных экранов.
• Не бойтесь творить при использовании :hover, ваши союзники — селекторы соседей и потомков.

Полезные материалы

1. pointer-events – CSS: Cascading Style Sheets | MDN — всеохватывающая документация по свойству pointer-events.
2. pointer-events | CSS-Tricks — полное руководство для понимания и использования pointer-events.
3. css – Click through div to underlying elements – Stack Overflow — общественное обсуждение на Stack Overflow на тему практического применения pointer-events.
4. "css-pointer-events" | Can I use... Support tables for HTML5, CSS3, etc — информация о совместимости свойства pointer-events в различных браузерах.
5. CSS pointer-events property – W3Schools — учебное пособие и примеры работы с pointer-events в CSS.
6. Pointer Events – W3C — официальная спецификация W3C для Pointer Events.