Информер курса валют ЦБ РФ   •   Магазин расширений
4 425 просм
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
Подскажите красивый курсор для сайта
  • 4
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.