Вигляд курсора в CSS

Вивчаємо властивість cursor, яка дозволяє змінювати вигляд курсора миші при наведенні на елементи.

Властивість cursor

Властивість cursor визначає, який вигляд матиме курсор миші під час наведення на елемент.

pointer — курсор у вигляді руки (для посилань і кнопок).
default — звичайний курсор.
text — курсор для виділення тексту.
wait — очікування.
move — переміщення.
not-allowed — дія заборонена.
help — довідка.
crosshair — хрестик.

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

Нижче курсор змінюється на знак заборони.


  <a href="#">
  Посилання
  </a>


a {
  cursor: not-allowed;
}

Поєднання з pointer-events

Якщо потрібно повністю вимкнути взаємодію з елементом, cursor часто використовують разом із pointer-events.


a.disabled {
  pointer-events: none;
  cursor: not-allowed;
  color: gray;
}

❗ Важливо:

Якщо встановити pointer-events: none, курсор може не змінитися, оскільки елемент перестає отримувати події миші. Часто для відображення курсора not-allowed використовують обгортку або батьківський елемент.

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

📌 Завдання:

№1. Створіть посилання, яке не реагуватиме на наведення та натискання.
№2. Змініть попереднє завдання так, щоб під час наведення курсор мав вигляд забороненої дії.

💡 Показати підказку

Для вимкнення взаємодії використайте pointer-events: none, а для зміни вигляду курсора — cursor: not-allowed.

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


<!-- HTML -->
<span class="disabled">
  <a href="#">Недоступне посилання</a>
</span>

/* CSS */
.disabled {
  cursor: not-allowed;
}

.disabled a {
  pointer-events: none;
  color: gray;
  text-decoration: none;
}