Курсоры

Cursor CSS

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

Значений у этого свойства много. Сначала приведем примеры их работы – подведите курсор к названию свойства и увидите его изменение при наведении.

Синтаксис

Значение свойство указывается в следующем виде:

При этом вместо pointer нужно указать нужное значение из таблицы со всеми видами значений ниже. По умолчанию установлено значение auto .

Вид	Значение	Примечание
	default
	context-menu	Работает только в IE10+.
	help
	pointer	Рука автоматически отображается при наведении курсора на ссылку.
	progress
	wait
	cell
	crosshair
	text
	vertical-text
	alias
	copy
	move
	no-drop	Отображается как not-allowed везде , кроме IE.
	not-allowed
	all-scroll
	col-resize
	row-resize
	n-resize
	ne-resize
	e-resize
	se-resize
	s-resize
	sw-resize
	w-resize
	nw-resize
	nesw-resize
	nwse-resize
	zoom-in	IE не поддерживает лупу.
	zoom-out	IE не поддерживает лупу
	grab	Chrome, Opera, Safari поддерживают значение -webkit-grab .
	grabbing	Chrome, Opera, Safari поддерживают значение -webkit-grabbing .

Произвольный курсор

Вы также можете установить свой курсор в виде изображения:

Если указано несколько изображений, браузер будет переходить к следующему варианту, если не удалось загрузить текущее изображение. Заканчиваться выражение должно одним из предустановленных свойств, например, pointer . Если не указать такое ключевое слово, можно получить сообщение об ошибке “invalid property value”.

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

cursor: url(cursor.png) 4 8, auto;

Можно использовать разные графические форматы, в том числе SVG.

Источник

Как изменить курсор при наведении мыши в CSS

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

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

Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.

Представим вам следующие методы контролирования курсора:

• Как сделать курсор в виде руки при наведении мыши на элемент списка
• Как изменить курсор гиперссылки при наведении мыши
• Как установить изображение для курсора
• Пример со всеми видами маркеров

Как сделать курсор в виде руки при наведении мыши на элемент списка

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

Давайте рассмотрим пример вышеуказанного метода:

Пример

html> html> head> title>Заголовок документа title> style> li< margin-bottom:15px; > li.pointer < cursor: pointer; > li:hover < background-color: #ccc; > style> head> body> h4>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель: h4> ul> li>Элемент списка 1 с курсором по умолчанию. li> li class="pointer">Элемент списка 2 с курсором-указателем по умолчанию. li> li>Элемент списка с с курсором по умолчанию. li> ul> body> html>

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Пример

html> html> head> title>Заголовок документа title> style> li:nth-child(odd) < background: #1c87c9; cursor: progress; width: 50%; padding: 5px; > li:nth-child(even) < background: #ccc; cursor: pointer; width: 50%; padding: 5px; > style> head> body> p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор: p> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> li>Элемент списка 4 li> li>Элемент списка 5 li> li>Элемент списка 6 li> li>Элемент списка 7 li> ul> body> html>

Как изменить курсор гиперссылки при наведении мыши

Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

Смотрите следующий пример:

Пример

html> html> head> title>Заголовок документа title> style> .link:hover < cursor: default; > style> head> body> h4>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default": h4> p>a href="https://www.w3docs.com">W3docs a> ссылка с исходным видом "pointer". p> p>a class="link" href="https://www.w3docs.com">W3docs a>ссылка с измененным курсором "default". p> body> html>

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Как установить изображение для курсора

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

.mycursor < cursor: url("myimage.png"), pointer; >

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

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

Пример

html> html> head> title>Заголовок документа title> style> body < background: #eee; text-align: center; > button < display: inline-block; background-color: #1c87c9; color: #eee; margin: 25px; position: relative; width: 140px; height: 45px; border-radius: 3px; border: none; font-size: 1.5em; text-align: center; text-decoration: none; box-shadow: 0 2px 8px 0 #999; > button:hover < background-color: #999; color: #ffcc00; > #happy < cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto; > #sad < cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto; > #love < cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto; > style> head> body> h2>Какое у вас впечатление от нашей веб-страницы? h2> button id="happy">Радостное button> button id="sad">Грустное button> button id="love">Влюбленное button> body> html>

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < width: 600px; margin: 0.5em auto; > img < width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; > .dog < cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto; > .cactus < cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto; > .nature < cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto; > .house < cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto; > style> head> body> img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus"> img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature"> img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog"> img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house"> body> html>

Пример со всеми видами курсора

Здесь увидите пример, который содержит все возможные виды курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #1c87c9; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p> Наведите курсор мыши на элемент и увидите изменения: p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>

Источник

Курсоры

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

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

Табл. 1. Курсоры для использования на веб-странице

Вид	Значение	Тест	Пример
	default	cursor: default
	crosshair	cursor: crosshair
	pointer	cursor: pointer
	move	cursor: move
	text	cursor: text
	wait	cursor: wait
	help	cursor: help
	n-resize	cursor: n-resize
	ne-resize	cursor: ne-resize
	e-resize	cursor: e-resize
	se-resize	cursor: se-resize
	s-resize	cursor: s-resize
	sw-resize	cursor: sw-resize
	w-resize	cursor: w-resize
	nw-resize	cursor: nw-resize

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

Пример 1. Изменение курсора при наведении его на ссылку

     .movelink < cursor: move; >.helplink    

Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).

Пример 2. Изменение вида курсора для всей веб-страницы

     body 
ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ
 
СПРАВКА
  

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

Пример 3. Курсор для разных областей веб-страницы

Источник