Артём Мáлков

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

7 янв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;
}

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

Файл
Размер
Ссылка
cursor.zip
29,36 Kb
Скачать с сервера
Рекомендуем к просмотру
Узнаем, с какой стороны элемента был введен курсор мыши на JavaScript
Статьи и советы
Выполнение функции при наведении на объект на jQuery
Статьи и советы
Иконки курсоров «Pointers» PNG
Графика и дизайн
1
комментарий
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 21
    766
      •  Гости
    19 янв в 07:41

    Подскажите красивый курсор для сайта

Подняться наверх
«Pandoge» - помощник вебмастера