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

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

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

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

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

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

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

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

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

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

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

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

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

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

За вид курсора отвечает CSS свойство «cursor». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.

1

Стандартные курсоры

Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:

body {
	cursor: help;
}

CSS

Полный список значений cursor

Значение	Windows	MacOS	Описание
auto			Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента
default			Основной курсор
none	–	–	Курсор не отображается
context-menu			Доступно контекстное меню
help			Доступна вспомогательная информация
pointer			Указатель, обозначающий ссылку
progress			Программа занята, но пользователь может взаимодействовать с интерфейсом
wait			Программа занята
cell			Указывает на возможность выбора клетки таблицы
crosshair			Крестик, часто используемый для обозначения выбора на битовой карте
text			Значок выбора текста
vertical-text			Значок выбора вертикального текста
alias			Будет создана ссылка внутри страницы
copy			Указывает на возможность копирования
move			Указывает на возможность перемещения объекта
no-drop			Указывает на невозможность «сбрасывания» объекта
not-allowed			Указатель невозможности выполнения действия
all-scroll			Указатель возможности перемещения по странице в любом направлении
col-resize			Объект может быть раздвинут/сдвинут горизонтально
row-resize			Объект может быть раздвинут/сдвинут вертикально
n-resize			Грань, которая может быть перемещена
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize			Двунаправленное изменение размера
ns-resize
nesw-resize
nwse-resize
zoom-in			Приближение или уменьшение
zoom-out
grab			Указывает на возможность схватить и переместить объект
grabbing

Браузеры на мобильных устройствах не поддерживают свойство cursor, но при этом в jQuery событие clik не сработает если у элемента нет свойства cursor: pointer.

body {
	cursor: url('/pointer.cur') 4 1;
}

body {
	cursor: 
		url('/pointer.png') 4 1, 
		url('/pointer.cur') 4 1, 
		pointer;
}

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

В общем-то, на этом весь выбор и ограничивается.

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

Соответственно, возникает вопрос, как это сделать и какими средствами?

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

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

Почему? Потому что курсор, который будет менять свой внешний вид в неподходящем месте и в неподходящее время может вводить пользователя в заблуждение.

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

Поэтому пользуйтесь такой возможностью с осторожностью.

Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:

 cursor: [ url ("путь к курсору"),] | [ auto | crosshair | default |
 e-resize | help | move | n-resize | ne-resize | nw-resize | pointer |
 progress | s-resize | se-resize | sw-resize | text | w-resize | wait |
 inherit ]

Из этого выражения следует, что курсор мыши может быть либо:

1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;

2) Взят из специального файла с изображением курсора

3) Наследован от родительских элементов.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Внешний вид курсора мыши из списка ключевых слов:

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

Каждому значению соответствует определенное отображение курсора.

В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.

<p style="cursor:wait;">Текст абзаца</p>

Внешний вид курсора мыши из файла:

Кроме того, внешний вид курсора можно задать, указав путь к специальному файлу, который содержит оригинальное изображение для курсора.

Файлы с изображениями для курсоров можно без проблем найти в Интернете.

Вот пример, как можно воспользоваться такой возможностью.

<p style="cursor:url('name.cur')">Текст абзаца</p>

Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.

Наследованный внешний вид курсора:

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

<div style="cursor:crosshair">
<p >Текст абзаца</p>
</div>

Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем <p>, курсор меняет свое оформление.

Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.

Вот такие возможности предоставляет нам технология CSS, для работы с курсорами.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor».
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:

p
{
cursor: значение;
}

Все значения находятся в табличке снизу:

Итак, вначале нужно создать в CSS класс со свойством «cursor»:

.pointer
{
cursor: pointer;
}

В HTML вывести класс:

<a href="#" class="pointer">наведи курсор</a>

Давайте я сейчас сделаю один примерчик.
Вот готовый рабочий код:

<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощью CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style ENGINE="text/css">
body {cursor: pointer;}
.help { cursor: help; }
.crosshair {cursor:crosshair;}
.wait {cursor:wait;}
.ne-resize{cursor:ne-resize;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="help">наведи курсор </a></li>
<li><a href="#" class="crosshair">наведи курсор</a></li>
</ul>
<p class="wait">наведи курсор, и курсор изменится</p>
<H3 class="ne-resize">наведи курсор, и курсор изменится</H3>
</body>
</html>

[посмотреть на результат]

Собственный курсор-картинка на css

Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку. Скачайте курсор мышки с интернета в формате «CUR», их там куча.
Вот так выглядит шаблон для изменения вида курсора-картинки в CSS:

P
{
cursor : url('путь к курсору'), стандартный курсор;
}

стандартный курсор – сюда вставляется значение из таблицы курсоров (смотрите таблицу выше).
Вот готовый код:

<html>
<head>
<title>Как изменить форму курсора мыши на сайте с помощи CSS - bloggood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { cursor: url("Up_Arrow.cur"), text;}
a:hover { cursor : url("UpArrow.cur"), auto;}
</style>
</head>
<body>
<ul>
<li><a href="#">наведи курсор </a></li>
<li><a href="#">наведи курсор</a></li>
</ul>
</body>
</html>

[посмотреть на результат]

[скачать курсоры с примера — UpArrow.cur]
[скачать курсоры с примера — Up_Arrow.cur]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Метки: css, для сайта