Как изменить вид курсора мыши в CSS

Если Вы даже начинающий пользователь, то уже успели заметить, что курсор имеет разные виды. В случае посещения web-страниц он изменяется при выделении текста, наведении на ссылку и так далее.
Как же самим средствами CSS изменить курсор и какие их виды бывают?

Виды курсоров в CSS

Курсоров есть целая масса: для выделения текста, при наведении на активные зоны (ссылки, кнопки и тд), знаки вопроса и многие другие.

Предлагаю посмотреть на то, какие они бывают.



Теперь к активу. Пример изменения курсора.

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

В CSS за изменение курсора отвечает свойство cursor. Достаточно изменить значение свойства. Например, создадим класс, при наведении на элемент с которым курсор будет иметь форму указателя-руки или pointer:

.pointer {
  cursor: pointer; // вид курсора как при наведении на ссылку
}

И присвоим класс div с текстом:

<div class="pointer">
Такое ощущение, что навели курсор не на текст, а на ссылку! Пример пользовательского диссонанса)
</div>

Тестим пример. От себя - советую на заигрываться с курсорами, так как пользователь может запутаться или получить некий дискомфорт в случае постоянного изменения курсора или ненадлежащего его вида.

Готово! Спасибо за внимание! Удачи!