Как поменять курсор при наведении css

cursor

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

Пример

Скопировать ссылку «Пример» Скопировано

Пусть будет обычный блок статьи:

   Какая-то статья   Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно.    article> h2>Какая-то статьяh2> div> p> Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно. p> div> article>

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

 article  cursor: url(cat.png) 2 2, default;> article  cursor: url(cat.png) 2 2, default; >

Спойлер: может не работать в Google Chrome. Лучше смотреть в Firefox или Safari.

Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Есть набор стандартизированных значений:

auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
default — обычная, привычная стрелочка.
none — курсора совсем нет.
pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.

Остальные, менее популярные значения:

context — menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
help — доступен вспомогательный информационный контент.
progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
wait — программа не отвечает, занята обработкой какой-то операции.
cell — можно выбрать одну или несколько ячеек таблицы.
crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
vertical — text — практически как text , но вертикально.
alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
copy — содержимое можно скопировать.
move — содержимое можно подвигать.
no — drop — в эту область нельзя перетащить файл.
not — allowed — действие не будет выполнено.
grab — содержимое можно схватить, чтобы перетащить.
grabbing — содержимое было схвачено для перетаскивания.
all — scroll — содержимое может быть проскроллено в любом направлении.
col — resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
row — resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
zoom — in — содержимое можно приблизить, увеличить.
zoom — out — содержимое можно отдалить, уменьшить.

Демо со всеми перечисленными курсорами:

Внешне курсоры могут отличаться в разных операционных системах.

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

 selector  cursor: url(cat.png), auto;> selector  cursor: url(cat.png), auto; >

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

Можно указывать несколько картинок подряд. Будет показана первая из доступных.

 selector  cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;> selector  cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer; >

Для каждой из картинок можно после закрывающей круглой скобки указать позицию курсора-картинки.

 selector  cursor: url(cat.png) 2 2, auto;> selector  cursor: url(cat.png) 2 2, auto; >

В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.

Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.

Как понять

Скопировать ссылку «Как понять» Скопировано

На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.

Обычно на простых сайтах нужны всего два значения: pointer и default . Поскольку контент там во многом состоит из текста и ссылок / кнопок.

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.

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

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor : pointer , чтобы пользователь точно понял, что с элементом можно взаимодействовать.

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

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

Синтаксис

Значения

url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора

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

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .

Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.

HTML5 CSS2.1 IE Cr Op Sa Fx

    cursor .cross < cursor: crosshair; >.help

Результат данного примера показан на рис. 1.

Применение свойства cursor

Рис. 1. Применение свойства cursor

HTML5 CSS2.1 IE Cr Op Sa Fx

    cursor   Обычный текст
 Ссылка 1 Ссылка 2 Ссылка 3

Объектная модель

[window.]document.getElementById(» elementID «).style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

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

Изменить курсор при наведении мы можем при помощи CSS свойства cursor .

Это свойство может принимать большое количество значений. Рассмотрим некоторые из них:

cursor: default; стандартная стрелка
cursor: auto; браузер сам определяет нужный курсор. Для ссылки это будет рука с поднятым указательным пальцем, для поля ввода — чёрточка, для обычных элементов — стрелка
cursor: pointer; рука с поднятым указательным пальцем. По умолчанию показывается для нажимаемых элементов, например, ссылок
cursor: text; это чёрточка с засечками сверху и снизу. По умолчанию показывается у полей ввода input или textarea
cursor: none; курсор при наведении исчезнет.

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

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

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

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

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

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

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

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

li < cursor: pointer; >

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

Пример

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», вам понадобится эта часть кода:

a:hover < cursor: 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 по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Смотрите статью Как изменить цвет ссылки с помощью CSS.

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

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

После этой части кода установите свойство 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>

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

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

Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit- .

Пример

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>

Читать:

Как посчитать какой процент от числа составляет другое число в эксель

cursor

Пример

Какая-то статья

Как пишется

Как понять

Подсказки

На практике

Алёна Батицкая советует

cursor

Синтаксис

Значения

Объектная модель

Браузеры

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

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

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

Пример

Пример

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

Пример

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

Пример

Пример

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

Пример

Похожие записи