Здравствуйте дорогие друзья и сегодня мы с вами рассмотрим какие возможности предоставляет нам CSS для стилизации курсора.

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

Изначально свойство cursor имеет значение default , то есть по умолчанию.

cursor:default;

Cамое часто применяемое значение это pointer

cursor:pointer;

которое указывает на то что элемент активный и по нему можно кликнуть.

Если вы хотите придать вашему курсору таинственности то можете воспользоваться значением

cursor:help;

которое добавляет к основному курсору знак вопроса.

Значение progress и wait создают эффект что у вас что то загружается.

cursor:progress;

значок загрузки с курсором.

cursor:wait;

значок загрузки без курсора.

Хотите ввести что то в текстовое поле не вопрос значение курсора text укажет вам что здесь можно вводить текст.

cursor:text;

Для любителей технологий drag-end-drop так же найдутся интересные плюшки связанные с отображением курсора при перемещении.

cursor:move;

перемещение во всех направлениях.

cursor: ne-resize; /* от нижнего  левого до верхнего  правого угла*/
cursor: e-resize;/*перемещение по горизонтали*/
cursor: se-resize;/*от верхнего левого к нижнему правому*/
cursor: s-resize;/*перемещение по горизонтали*/
cursor: sw-resize;/*от верхнего правого до левого нижнего*/

Если вы хотите что то добавить в таблицу то вам может подойти такой вид курсора

cursor:cell;

Курсор в виде крестика:

cursor:crosshair ;

Хотите курсором обозначить копирование не вопрос:

cursor:copy;

или может показать пользователю что данная функция недоступна ok:

cursor:not-allowed;
или cursor:no-drop;

Выйти или вернуться назад:

cursor:alias;

Мы также можем с помощью курсора показать пользователю что к элементу есть возможность применять zoom - эффекты.

cursor:zoom-in;/*Приблизить*/

cursor:zoom-out;/*Отдалить*/

Если не один из выше предложенных вариантов вас не устраивает то можно вставить свой собственный курсор картинкой.

cursor: url("mysursor.jpg"), auto;

Ну тут я думаю вам ничего объяснять не стоит.

Мы можем также вообще убрать курсор:

cursor:none;

Вот в принципе и все что я хотел вам рассказать про стилизацию курсора в css.

Надеюсь данная статья была для вас полезна и увлекательна и вы не раз еще воспользуетесь полученными знаниями.

Я желаю вам успехов и удачи! Пока!