Использование :hover | WebReference
На примере ссылок использование :hover выглядит следующим образом.
a { color: green; }
a:hover { color: red; }Сперва мы определяем исходный стиль элемента, в частности, задаём цвет ссылок с помощью селектора A зелёным. Затем ниже пишем тот же селектор и через двоеточие без пробелов добавляем к нему :hover. После этого идут стилевые правила, которые должны проявляться при наведении курсора на элемент. В данном случае мы меняем цвет ссылки на красный.
:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в <header> добавлены без традиционного подчёркивания через свойство text-decoration со значением none. При наведении на эти ссылки добавляется подчёркивание с помощью значения underline. В <footer> ссылки при наведении просто меняют свой цвет.
Пример 1. Использование :hover для ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Сальса</title> <style> header { background: #e2edc1; } footer { background: #f4783b; } ul { margin: 0; padding: 10px; } li { display: inline; margin-right: 10px; } header a { color: #333391; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } header a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении */ } footer a { color: #fff; } footer a:hover { color: #333; } </style> </head> <body> <header> <ul> <li><a href=»#»>Uno</a></li> <li><a href=»#»>Dos</a></li> <li><a href=»#»>Tres</a></li> </ul> </header> <main> <p>Сальса — современный социальный танец. Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.
Результат данного примера показан на рис. 1.
Рис. 1. Ссылки разных цветов
Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover.
a { color: green; }
a:hover { color: red; }
a:visited { color: purple; }Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.
a { color: green; }
a:visited { color: purple; }
a:hover { color: red; }- :focus на мобильных устройствах
- <a>
- text-decoration-skip-ink
- Виды ссылок
- Всплывающая подсказка
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Работа с типографикой
- Сочетание с псевдоклассами
- Ссылки
Автор: Влад Мержевич
Последнее изменение: 11.
03.2020
Решение проблемы с CSS :hover. Поговорим о псевдоклассе :hover… | by Саша Азарова | NOP::Nuances of Programming
.hummingbird:hover {}:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.
“Хм … а в чем, собственно говоря, заключается проблема?”
Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!
Пример элементов с :hover на десктопе. Источник: https://proper-hovering.glitch.meОднако на сенсорном экране с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе.
Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.
Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.
Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.
“Не может же быть, чтобы эту проблему не пытались как-то решить…”
Да, определенные решения выдвигались. Лучшим из них было использование JavaScript для определения наличия сенсорного экрана и последующее применение класса к body . После чего, добавляя к какому-либо элементу псевдокласс :hover, будет происходить явное обращение к этому классу.
body.nontouch nav a:hover {
background: yellow;
}Однако подобное решение имеет несколько недостатков:
- Разработчик может создать JS-сценарий обнаружения, который работает сегодня, но что с ним будет через пару месяцев, когда появится какая-то новая технология? Ноутбуки с сенсорными экранами? Съемные сенсорные экраны? Apple Pencil? Никто не хотел бы беспокоиться об этом во время разработки.
- Использование основанного на компонентах JS-фреймворка с инкапсулированными стилями неудобно. Так как каждый раз, когда активируется :hover, стили этого элемента должны ссылаться на этот глобальный класс.
- Это решение может работать по-разному на разных устройствах. Возможно, что для специальных устройств придется придумывать специальное решение. Однако должен быть стандартизированный способ, работающий на всех устройствах.
Media Queries Level 4
Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки.
Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.
Четвертый уровень медиазапросов включает в себя: hover,any-hover, pointer, any-pointer. Они предоставляют информацию о возможности применения hover и типе пользовательского ввода. Например, @media (hover: hover) будет true, если hover элемента активируется курсором мыши. А @media (any-pointer: coarse) будет true, если какой-либо ввод имеет ограниченную точность (например, касание по сенсору). Эти мультимедийные функции предоставляют достаточно информации для правильного взаимодействия с hover.
Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними.
На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.
С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.
Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.
Вот тестовый сайт, на котором вы можете протестировать свое устройство, чтобы узнать, какие из этих медиазапросов применимы к нему, а также просмотреть настройки некоторых наиболее популярных устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Перевод статьи Mezo Istvan: Finally, a CSS only solution to :hover on touchscreens
CSS: псевдокласс hover
❮ Пред. Следующий ❯
Псевдокласс :hover выбирает и стилизует зависший элемент. Он покрывается пользователем.
Элементы наводятся, когда пользователь наводит указатель мыши на элемент. Он не активирует указывающее устройство.
Псевдоклассы :link, :active или :visited переопределяют стиль, определенный псевдоклассом :hover.
Многие сенсорные устройства не поддерживают :hover, потому что у него есть проблемы с сопоставлением.
Селекторы уровня 3
Селекторы уровня 4
:hover {
css объявления;
} Пример псевдокласса :hover:
<голова>
Название документа
<стиль>
а: наведите {
цвет фона: #8ebf42;
цвет: #666;
}
<тело>
: пример селектора при наведении
w3docs.com/">W3docs.com
Попробуй сам »
Наведите указатель мыши на ссылки, чтобы увидеть, как меняется цвет.
Пример псевдокласса :hover с тегом
:
<голова>
Название документа
<стиль>
а {
цвет: #1c87c9;
}
а: наведите {
цвет фона: #8ebf42;
цвет: #еее;
}
<тело>
: пример селектора при наведении
Lorem Ipsum — это просто фиктивный текст для полиграфии и набора. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в
электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки из Lorem Ipsum, а совсем недавно — с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum.
Попробуй сам »
Пример псевдокласса :hover с тегом
<голова>
Название документа
<стиль>
дел {
отступ: 30 пикселей;
цвет фона: #8ebf42;
цвет: #еее;
}
раздел:наведите {
цвет фона: #666;
цвет: #fff;
}
<тело>
: пример селектора при наведении
<дел>
Lorem ipsum - просто фиктивный текст...
Попробуй сам »
Практикуйте свои знания
Какое утверждение верно о псевдоклассе :hover?
Он активирует указывающее устройство Все сенсорные устройства поддерживают :hover. Псевдокласс :active переопределяет стиль, определенный псевдоклассом :hover Псевдокласс :hover выбирает и стилизует посещаемый элемент.
Успех!
Неверно! Ты не правильно понял!
CSS эффекты наведения изображения , эффекты наведения изображения , прозрачность наведения , наложение наведения и изменение изображения наведения
В следующем уроке мы собираемся продолжить это с различными видами эффектов, специально созданных для использования с изображениями. Однако эти эффекты могут сделать ваш сайт более динамичным и живым. Все эффекты, которые мы будем использовать сегодня, используют код, поддерживаемый современными браузерами.Создание эффекта ролловера (Hover Effects)
В следующем коде показано, как отобразить эффект наведения на Box Shadow.
Наведите курсор сюда
Исходный код
Наведите мышку сюда
Эффекты наведения изображения (переворачивание изображений)
Следующий код CSS показывает, как представить эффекты наведения изображения.
Наведите указатель мыши на изображение.
Исходный код
Подробнее о CSS Shadow… Примеры CSS Shadow
Непрозрачность/прозрачность изображения CSS
Непрозрачность противоположна прозрачности, не пропускает свет.
Вы можете создавать прозрачные изображения в CSS с помощью свойства opacity.
CSS Эффект затухания изображения
Эффект размытия изображения
изображение { непрозрачность: 0,3; }Подробнее о …. Как сделать фоновые изображения прозрачными
Создание прозрачных/непрозрачных изображений — эффект наведения мыши
Непрозрачность изображения при наведении
Наведите указатель мыши на изображение.
Исходный код
Наложение текста на изображение при наведении
Наложение изображений друг на друга — отличный способ придать изображению новый вид. Здесь код CSS, отображающий текст на изображении при наведении курсора мыши
Наведите указатель мыши на изображение.
Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.
Исходный код
Подробнее о наложении CSS… Методы наложения CSS
Тигр — самый крупный вид кошек, достигающий общая длина тела до 3,3 м и массой до до 306 кг. Его самая узнаваемая черта — узор. темных вертикальных полос на красновато-оранжевом меху с более светлым низом.
Замена изображения при наведении CSS — событие onmouseover
Следующий код CSS показывает, как изменить изображение при наведении курсора мыши. При наведении мыши один div, содержащий изображение, помещается поверх другого изображения.
Наведите указатель мыши на изображение.
Исходный код
Как наложить окно на всю страницу… Полноэкранное наложение CSS
Изменение ссылки на изображение при наведении (Создать эффект ролловера)
В следующем исходном коде показано, как изменить ссылку на изображение при наведении указателя мыши.
