Как изменить курсор при наведении мыши в CSS
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Как сделать курсор в виде руки при наведении мыши на элемент списка
Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (<li>) и установить стиль только для него. Но если необходимо установить указатель в форме руки для всех элементов списка, просто установите стиль для элемента <li> .
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.
Пример
Как изменить курсор гиперссылки при наведении мыши
Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента <a> с помощью CSS селектора :hover.
Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:
Смотрите следующий пример:
Пример
Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.
Как установить изображение для курсора
Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.
После этой части кода установите свойство cursor как image:
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.
Курсоры
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 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. Изменение курсора при наведении его на ссылку
Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <div> или <span> . В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <span> . Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
cursor
С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.
Пример
Скопировать ссылку на секцию «Пример» Скопировано
Пусть будет обычный блок статьи:
Пусть при наведении курсора на блок статьи показывается смайлик с котиком:
Спойлер: может не работать в 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 — содержимое можно отдалить, уменьшить.
Демо со всеми перечисленными курсорами:
Внешне курсоры могут отличаться в разных операционных системах.
Кроме значений, заданных при помощи ключевых слов, можно указывать ссылку на картинку, которая будет показана вместо курсора.
Если вы решили сделать кастомный курсор, то обязательно укажите через запятую одно из стандартных значений. Это нужно на случай, если браузер не смог загрузить или отобразить картинку. Тогда будет показан тот курсор, который вы указали в конце значения.
Можно указывать несколько картинок подряд. Будет показана первая из доступных.
Для каждой из картинок можно после закрывающей круглой скобки указать позицию курсора-картинки.
В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.
Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.
Как понять
Скопировать ссылку на секцию «Как понять» Скопировано
На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.
Обычно на простых сайтах нужны всего два значения: pointer и default . Поскольку контент там во многом состоит из текста и ссылок / кнопок.
Если у вас сервис или сложная система управления, в которой есть больше вариантов взаимодействия с интерфейсом, чем просто на что-то нажать или что-то выделить, то отнеситесь внимательно к подбору правильных курсоров для каждого из интерактивных элементов. Именно по изменению внешнего вида курсора пользователь будет понимать, как именно взаимодействовать с элементом.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.
�� Пользователь привык целиться в то, на что хочет нажать кончиком курсора. Если вы сильно сдвинете картинку относительно этого самого кончика, то пользователь может не попасть в область клика.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor : pointer , чтобы пользователь точно понял, что с элементом можно взаимодействовать.
Читайте также
user — select
Свойство CSS, которое разрешает или запрещает возможность выбора текста.
pointer — events
Свойство pointer — events определяет, как HTML-элемент реагирует на различные события мыши, прикосновений или события из JavaScript.
caret — color
С помощью caret — color можно менять цвет курсора в режиме набора текста.
Изменение курсора при наведении мыши
Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.
Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.
Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:
<img src = ‘myimage.jpg’ alt = ‘Моё изображение’ style = ‘cursor: pointer;’/>
Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.
Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновленияЕсли у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 18 ):
Когда задаешь свой курсор, то через запятую лучше написать не ‘text’, a ‘default’. А то, напр., в Опере, где не поддерживаются свои курсоры, будет вам ‘I’ вместо стрелочки))