CSS :: Свойство cursor

css-свойство cursor (от англ. cursor – курсор, указатель) задает вид курсора при нахождении его над элементом.

Характеристики

Значение по умолчанию: auto.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.cursor="value".

Синтаксис

cursor: [url('адрес'), ] | [<курсор>]

Значения

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

url("path") – будет загружено собственное изображение для курсора. Разрешается указывать через запятую путевые адреса сразу к нескольким файлам изображений. При этом важно помнить, что поддерживаются не все форматы изображений, а только форматы CUR, PNG, GIF, JPG (анимация в формате GIF работать не будет, также старайтесь ограничивать размеры изображений в пределах 128x128 пикселей, т.к. изображения слишком больших размеров отображаться не будут). Кроме того, после адреса или списка адресов нужно обязательно указать через запятую одно из стандартных значений, перечисленных ниже (например, cursor: url("smile.png"), auto;).
alias – курсор, указывающий, что ярлык может быть создан.
all-scroll – курсор, указывающий, что что-то может быть прокручено в любом направлении.
auto – будет использован стандартный курсор, установленный браузером по умолчанию для данного типа элементов.
cell – курсор, указывающий, что ячейка или группа ячеек может быть выбрана.
col-resize – курсор, указывающий, что столбец может быть изменен по горизонтали.
context-menu – курсор, указывающий, что для элемента доступно контекстное меню.
copy – курсор, указывающий, что что-то может быть скопировано.
crosshair – курсор в виде перекрестья.
default – курсор по умолчанию.
e-resize (от англ. east – восток) – курсор, указывающий, что можно перетащить (растянуть) направо.
ew-resize (от англ. east and west – восток и запад) – курсор, указывающий, что можно перетащить (растянуть) в обе стороны.
grab – курсор, указывающий, что что-то можно перетащить (захватить).
grabbing – курсор, указывающий, что что-то перетаскивается (захвачено).
help – курсор, указывающий, что имеется возможность получить помощь.
move – курсор, указывающий, что элемент может быть перемещен.
n-resize (от англ. north – север) – курсор, указывающий, что можно перетащить (растянуть) наверх.
ne-resize (от англ. north-east – северо-восток) – курсор, указывающий, что можно перетащить (растянуть) вверх-направо.
nesw-resize (от англ. north-east and south-west – северо-восток и юго-запад) – курсор, указывающий, что можно перетащить (растянуть) в обе стороны по диагонали вверх-направо или наоборот.
none – курсор будет отсутствовать.
no-drop – курсор, указывающий, что перетаскиваемый объект не может быть помещен здесь.
nw-resize (от англ. north-west – северо-запад) – курсор, указывающий, что можно перетащить (растянуть) вверх-налево.
nwse-resize (от англ. north-west and south-east – северо-запад и юго-восток) – курсор, указывающий, что можно перетащить (растянуть) вверх-налево.
pointer – курсор в виде указующего перста.
progress – курсор, указывающий, что программа занята процессом обработки информации.
s-resize (от англ. south – юг) – курсор, указывающий, что можно перетащить (растянуть) вниз.
se-resize (от англ. south-east – юго-восток) – курсор, указывающий, что можно перетащить (растянуть) вниз-направо.
sw-resize (от англ. south-west – юго-запад) – курсор, указывающий, что можно перетащить (растянуть) вниз-налево.
text – курсор, указывающий на текст.
vertical-text – курсор, указывающий, что вертикальный текст может быть выделен.
wait – курсор, указывающий, что программа занята.
w-resize (от англ. west – запад) – курсор, указывающий, что можно перетащить (растянуть) налево.
zoom-in – курсор, указывающий, что что-то может быть увеличено.
zoom-out – курсор, указывающий, что что-то может быть уменьшено.
inherit – значение наследуется от родителя.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-ui-3/#propdef-cursor

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/cursor

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		width: 500px;
		margin: 2em;
		}
						
		.first_cursor{										
		cursor: url("images/tail_cursor.gif"), auto;
		}

		.second_cursor{										
		cursor: url("images/arrow_cursor.cur"), auto;
		}

		.third_cursor{										
		cursor: url("images/small_cursor.png"), auto;
		}

		.forth_cursor{										
		cursor: url("images/big_cursor.png"), auto;
		}
		
	</style>
	
</head>
<body>

	<p>
		Для того, чтобы в качестве курсора мыши установить свое изображение, 
		необходимо в качестве значения свойства cursor использовать путь к 
		файлу изображения (например, cursor: url("smile.png"), auto;). 
		Разрешается указывать через запятую путевые адреса сразу к нескольким 
		файлам изображений; при этом важно помнить, что поддерживаются не все 
		форматы изображений, а только форматы CUR, PNG, GIF, JPG (анимация в 
		формате GIF работать не будет, также старайтесь ограничивать размеры 
		изображений в пределах 128x128 пикселей, т.к. изображения слишком 
		больших размеров отображаться не будут); кроме того, после адреса или 
		списка адресов нужно обязательно указать через запятую одно из 
		стандартных значений. Ниже созданы несколько абзацев, при наведении 
		на которые стандартный курсор будет изменен на наш собственный.
	</p>
	
	<p class="first_cursor">
		В данном абзаце в качестве курсора мы использовали изображение в 
		формате GIF. Однако анимация работать не будет, хотя само 
		изображение показывается.
	</p>
	
	<p class="second_cursor">
		В данном абзаце в качестве курсора мы использовали изображение в 
		формате CUR.
	</p>
	
	<p class="third_cursor">
		В данном абзаце в качестве курсора мы использовали изображение в 
		формате PNG размером 32x32 пикселя.
	</p>
	
	<p class="forth_cursor">
		А вот здесь будет использован стандартный курсор, т.к. мы превысили 
		допустимый размер изображения на один пиксель (129x129 пикселей).
	</p>
	
</body>
</html>

Пример №1