Прозрачность div и кликабельность текста под ним в CSS

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

Чтобы элемент div перестал реагировать на клики мыши, достаточно к нему применить CSS-свойство pointer-events: none;. Данный стиль можно присвоить напрямую элементу или через класс:

.no-click {
  pointer-events: none;
}

А затем использовать этот класс в HTML-коде:

<div class="no-click">По мне кликать бессмысленно!</div>

Таким образом, div «игнорирует» действия мыши и позволяет событиям проникнуть к элементам, которые расположены ниже по Z-индексу.

Взгляд под «капот»: объяснение свойства pointer-events

Свойство pointer-events задает, будет ли элемент регистрировать события устройств ввода, например, мыши или сенсорного экрана. Если его значение установлено как 'none', то элемент получает указание игнорировать все подобные события, что пропускает их через себя. Поддержка этого функционала есть в большинстве современных браузеров, включая Firefox 3.6+, Chrome 2+, IE 11+ и Safari 4+.

Альтернативные подходы к обработке событий мыши

Если применение pointer-events: none; не подходит, на помощь придут функции JavaScript.

Применение JavaScript для временного «скрытия» элемента

Для обеспечения возможности взаимодействия с элементами, находящимися за временно скрытым div:

function toggleOverlayVisibility(id) {
  var overlay = document.getElementById(id);
  overlay.style.display = 'none';
  var x = event.clientX, y = event.clientY;
  var elementMouseIsOver = document.elementFromPoint(x, y);
  overlay.style.display = 'block';
  return elementMouseIsOver;
}

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

Делегирование клика через JavaScript

«Перехватите» клик и переадресуйте его на элемент под div c классом 'no-click':

document.addEventListener('click', function(event) {
  var target = document.elementFromPoint(event.clientX, event.clientY);
  if (target.classList.contains('no-click')) {
    target.style.pointerEvents = 'auto';
    var actualTarget = toggleOverlayVisibility('overlayDivId');
    actualTarget.click();
    target.style.pointerEvents = 'none';
  }
});

Отключение событий с помощью jQuery

Если вы предпочитаете использовать jQuery, отключение событий на элементе возможно таким образом:

$('#myDivId').css('pointer-events', 'none').off(); // Теперь див не реагирует на события

Стоит отметить, что с точки зрения производительности напрямую работать с DOM обычно предпочтительнее, чем использовать jQuery.

Доступность и проблема с некликабельными div

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

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

Представьте себе комнату с окном: вы видите улицу, но не можете коснуться того, что за стеклом:

Снаружи: [🌳, 🐦, 🌼, 🚴]
Окно:    [🪟]  (прозрачный барьер)
Внутри:  [🛋️, 🖼️, 📚]

Стля на div применен так, что он становится аналогом непроницаемого, но прозрачного окна:

.invisible-barrier {
  pointer-events: none; /* ⛔ Нельзя прикоснуться! */
}

Интеракция становится невозможной:

До: [🖱️➡️🪟(Кликам стоп!)]
После: [🖱️⛔🪟(Событие проходит мимо!)]

Получается, что это как клетка без прутьев: видеть можно, но достать — нет.

Исследование и устранение возможных проблем:

Обеспечение понятного пользовательского интерфейса

Иногда применение pointer-events: none; может запутать пользователя, так как нарушает ожидаемые модели поведения. Всегда проверяйте удобство и доступность интерфейса.

Управление динамическими элементами

Если накладываемый на ваш div слой должен меняться в ответ на действия пользователя, вам может потребоваться переключение свойства pointer-events в процессе работы.

function switchPointerEvents(id, enable) {
  var overlay = document.getElementById(id);
  overlay.style.pointerEvents = enable ? 'none' : 'auto';
}

Кроссбраузерность

Проверяйте, как ваше решение ведет себя в разных браузерах, особенно в старых или менее распространенных и будьте готовы к использованию альтернативных методов.

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

1. pointer-events – CSS: Cascading Style Sheets | MDN — Обстоятельное описание свойства pointer-events.
2. CSS pointer-events property – W3Schools — Учебные ресурсы и примеры использования pointer-events от W3Schools.
3. html – css 'pointer-events' property alternative for IE – Stack Overflow — Обсуждение и решения по применению pointer-events для Internet Explorer на площадке Stack Overflow.
4. pointer-events | CSS-Tricks – CSS-Tricks — Обсуждение и советы по использованию свойства pointer-events.
5. Introduction to events – Learn web development | MDN — Обширное введение в концепцию событий в веб-разработке.
6. The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine — Подробный обзор свойства z-index и его воздействия на pointer-events.
7. Can I use... Support tables for HTML5, CSS3, etc — Информация о поддержке pointer-events в различных браузерах и их версиях.