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

Оформление внешнего вида курсора, css-свойство cursor

Для изменения внешнего вида курсора при нахождении его над элементом используется наследуемое css-свойство cursor, которое может принимать следующие значения (чтобы увидеть визуально, как выглядит курсор, наведите мышь на соответствующий пункт с описанием значения свойства):

url("path") – будет загружено собственное изображение для курсора (см. пример №1). Разрешается указывать через запятую путевые адреса сразу к нескольким файлам изображений. При этом важно помнить, что поддерживаются не все форматы изображений, а только форматы 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 – значение наследуется от родителя.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Использование изображения в качестве курсора мыши</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. Использование изображения в качестве курсора мыши

События мыши и css-свойство pointer-events

Наследуемое css-свойство pointer-events позволяет контролировать процесс реагирования элемента на события мыши или прикосновения к сенсорному экрану над ним. Это может быть полезным, например, когда нужно заблокировать переход при клике по ссылке или появление подсказки при наведении на элемент с атрибутом title (см. пример №2). Свойство принимает всего два значения:

auto – элемент будет реагировать как обычно.
none – события мыши над элементом будут игнорироваться.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cвойство pointer-events</title>

	<style>
				
		p{
		width: 400px;
		height: 50px;
		padding: 2em;
		background-color: yellow;
		cursor: pointer;
		}

		/* Запрещаем события мыши над элементом */
		.events_none{
		background-color: violet;		
		pointer-events: none;
		cursor: auto;		
		}		
	 
	</style>
	
</head>
<body>

	<p onclick="event.currentTarget.innerHTML='Клик прошел!'">
		Реакция на клик будет обычной.         
	</p>

	<p class="events_none">
		Реакция на клик будет отсутствовать.      
	</p>
			
</body>
</html>

Пример №2. Использование свойства pointer-events

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

Оформление внешнего вида курсора, css-свойство cursor

События мыши и css-свойство pointer-events

Быстрый переход к другим страницам