Как изменить курсор при наведении на элемент в CSS?

Чтобы изменить курсор при наведении на элемент в CSS, нужно использовать свойство cursor. ru.hexlet.io sky.pro Оно может принимать различные значения, например:

• cursor: default — стандартная стрелка; ru.hexlet.io
• cursor: auto — браузер сам определяет нужный курсор в зависимости от того, на какой элемент он наведён; doka.guide
• cursor: pointer — курсор в виде руки с поднятым указательным пальцем, который по умолчанию показывается для нажимаемых элементов, например, ссылок; ru.hexlet.io
• cursor: text — чёрточка с засечками сверху и снизу, которая по умолчанию показывается у полей ввода input или textarea; ru.hexlet.io
• cursor: none — курсор при наведении исчезнет. ru.hexlet.io

Пример кода для установки курсора в виде указателя для элемента с классом .hover-target: sky.pro

.hover-target {   cursor: pointer; } 

При наведении на элемент с классом .hover-target форма курсора изменится на указатель. sky.pro

Также можно установить пользовательский курсор, указав ссылку на картинку, которая будет показана вместо курсора: doka.guide

.unique-cursor {   cursor: url('path-to-image.png'), auto; } 

Для лучшей чёткости рекомендуется выбирать размер пользовательского курсора в пределах 128x128 пикселей. sky.pro