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

Автор статьи: Сергей Каминский

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

Значения CSS-атрибута cursor

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

Вид	CSS-код	Пример	Браузер
	cursor: default;		все
	cursor: hand;		IE
	cursor: pointer;		все
	cursor: crosshair;		все
	cursor: text;		все
	cursor: wait;		все
	cursor: help;		все
	cursor: move;		все
	cursor: e-resize;		все
	cursor: w-resize;		все
	cursor: ne-resize;		все
	cursor: sw-resize;		все
	cursor: nw-resize;		все
	cursor: se-resize;		все
	cursor: n-resize;		все
	cursor: s-resize;		все
	cursor: progress;		все
	cursor: all-scroll;		все
	cursor: col-resize;		все
	cursor: no-drop;		все
	cursor: not-allowed;		все
	cursor: row-resize;		все
	cursor: vertical-text;		все
	cursor: url(/style/cursor.cur), pointer;		IE, Firefox, Google Chrome

Примеры CSS кода

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

<a href="/help.php" style="cursor: help;">Помощь</a>

Следующий пример указывает браузеру, что он должен использовать при наведении на ссылку вместо стандартного курсора файл cursor.cur, расположенный на вашем сайте.

<a href="/link.php" style="cursor: url(/style/cursor.cur), pointer;">Ссылка</a>

Заключение

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