Генератор CSS-свойства «border-radius»   •   Online-инструменты
1 512 просм
1 комм
Поделиться:

Как изменить стандартный курсор на сайте?

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

Делаем нестандартный курсор на сайте

Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:

body {
	cursor: url('/пусть к файлу/sword.cur'), auto;
}

В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur

Как изменить стандартный курсор на сайте?

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

.link:hover {
	cursor: url('/путь к файлу/sword.cur'), auto;
}

Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.

Стандартные свойства CSS для изменения курсора

Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.

cursor: auto;cursor: default;cursor: none;
cursor: context-menu;cursor: help;cursor: pointer;
cursor: progress;cursor: wait;cursor: cell;
cursor: crosshair;cursor: text;cursor: vertical-text;
cursor: alias;cursor: copy;cursor: move;
cursor: no-drop;cursor: not-allowed;cursor: all-scroll;
cursor: n-resize;cursor: e-resize;cursor: s-resize;
cursor: w-resize;cursor: col-resize;cursor: row-resize;
cursor: nw-resize;cursor: se-resize;cursor: sw-resize;
cursor: ew-resize;cursor: nesw-resize;cursor: nwse-resize;
cursor: zoom-in;cursor: zoom-out;cursor: grabbing;
cursor: grab;cursor: ns-resize;cursor: ne-resize;

Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:

.link:hover {
	cursor: w-resize;
}

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

ФайлРазмерСсылка
1
комментарий
Сергей
19.01 в 07:41
Подскажите красивый курсор для сайта
  • 5
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария