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

Как изменить курсор при наведении мыши в 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 для установления курсора.

cursor

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

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

Синтаксис

cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | 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

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

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

[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.

Курсоры в CSS

За вид курсора отвечает CSS свойство « cursor ». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.

Стандартные курсоры

Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:

Полный список значений cursor

Значение Windows MacOS Описание
auto Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента
default Основной курсор
none Курсор не отображается
context-menu Доступно контекстное меню
help Доступна вспомогательная информация
pointer Указатель, обозначающий ссылку
progress Программа занята, но пользователь может взаимодействовать с интерфейсом
wait Программа занята
cell Указывает на возможность выбора клетки таблицы
crosshair Крестик, часто используемый для обозначения выбора на битовой карте
text Значок выбора текста
vertical-text Значок выбора вертикального текста
alias Будет создана ссылка внутри страницы
copy Указывает на возможность копирования
move Указывает на возможность перемещения объекта
no-drop Указывает на невозможность "сбрасывания" объекта
not-allowed Указатель невозможности выполнения действия
all-scroll Указатель возможности перемещения по странице в любом направлении
col-resize Объект может быть раздвинут/сдвинут горизонтально
row-resize Объект может быть раздвинут/сдвинут вертикально
n-resize Грань, которая может быть перемещена
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize Двунаправленное изменение размера
ns-resize
nesw-resize
nwse-resize
zoom-in Приближение или уменьшение
zoom-out
grab Указывает на возможность схватить и переместить объект
grabbing

Браузеры на мобильных устройствах не поддерживают свойство cursor , но при этом в jQuery событие clik не сработает если у элемента нет свойства cursor: pointer .

Установка своего курсора

Все браузеры дают возможность установить элементу свой курсор из файла по URL, например:

Вторым параметром задаются координаты активной точки, в которой регистрируется нажатие мыши. По умолчанию это левый верхний угол (0,0).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *