Урок 15 із 104
14%
← Назад

Відключення реакції елементів у CSS

Вивчаємо властивість pointer-events, яка дозволяє вимкнути реакцію елементів на кліки, наведення та інші дії миші.

Властивість pointer-events

Властивість pointer-events визначає, чи буде HTML-елемент реагувати на дії вказівника миші: кліки, наведення, натискання та інші події.

  • pointer-events: auto — стандартна поведінка, елемент реагує на всі події.
  • pointer-events: none — елемент повністю ігнорує всі події миші.

Приклад вимкнення натискання

Нижче кнопка виглядає звичайною, але натиснути її неможливо.


<button class="btn">
  Натиснути
</button>

.btn {
  padding: 10px 20px;
  font-size: 16px;

  pointer-events: none;
}

Коли це використовується

  • тимчасове блокування кнопок;
  • відключення посилань;
  • створення декоративних елементів поверх інших блоків;
  • блокування взаємодії під час завантаження даних.
❗ Важливо:

pointer-events вимикає лише взаємодію мишею. Сам елемент залишається на сторінці та продовжує відображатися.

Практичне завдання

📌 Завдання:
  1. №1. Створіть кнопку.
  2. №2. Зробіть так, щоб вона не реагувала на натискання.
💡 Показати підказку

Використайте властивість pointer-events зі значенням none.

✅ Показати відповідь

button {
  pointer-events: none;
}