Содержание
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 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. Изменение вида курсора для всей веб-страницы
Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги
Пример 3. Курсор для разных областей веб-страницы
Есть элемент и задача такова, что при наведении курсора на элемент, должен всплывать элемент с текстом (хоть div , хоть span — это уже неважно, какой сделать).
Подскажите, пожалуйста, как это реализовать? :hover не работает.
1 ответ 1
К любому html-элементу может быть применён атрибут title, текст которого будет показываться во всплывающей подсказке браузером.
Другой вариант на :hover отображать ::before или ::after с нужным контентом и соответствующей стилизацией. Обычно один из них используется для полезного контента, а второй для формирования треугольной стрелочки.
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Как сделать курсор в виде руки при наведении мыши на элемент списка¶
Если хотите изменить указатель мыши, чтобы он стал в форме руки при наведении мыши на элемент списка, можно установить класс для элемента списка (
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.
Пример
Как изменить курсор гиперссылки при наведении мыши¶
Известно, что курсор по умолчанию для гиперссылки устанавливается как "pointer". Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.
Чтобы изменить "pointer" в "default", вам понадобится эта часть кода:
Смотрите следующий пример:
Пример
Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.
Смотрите статью Как изменить цвет ссылки с помощью CSS.
Как установить изображение для курсора¶
Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.
После этой части кода установите свойство cursor как image:
Не забудьте установить вид курсора, чтобы показать, когда браузер не сможет использовать предоставленное изображение. В противном случае, код не будет работать.
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.
Пример
Пример со всеми видами курсора¶
Здесь увидите пример, который содержит все возможные виды курсора.
Для значений "zoom-in", "zoom-out", "grab" и "grabbing" добавляется расширение -webkit- .