Как совместить :after с :hover?
html3 недели назад
от Abdul Moeed
Селектор «:after» часто используется для добавления содержимого к элементу, по умолчанию содержимое отображается в той же строке после элемента. «:hover» используется с элементом для выполнения определенных стилей при наведении курсора мыши пользователем. Оба используются для создания интерактивного веб-сайта и помогают поддерживать лучшее взаимодействие с пользователем.
В этой статье демонстрируются различные способы объединения :after с селектором :hover.
- Как объединить :after с :hover?
- Использование селектора :after
- Использование селектора :hover
- Объединить :after с селекторами :hover
Как объединить :after с :hover?
CSS-селекторы «:после » и «:hover » можно использовать в комбинации для добавления содержимого или стиля к элементу. Чтобы объединить их обоих, напишите их в одной строке, а перед этим напишите селектор элемента или класс этого элемента HTML.
Использование селектора :after
Селектор « :after » добавляет содержимое после выбранного элемента HTML. Он используется для добавления данных в элементы HTML. Например, см. приведенный ниже пример.
Пример
В этом примере содержимое добавляется к уже существующему тегу HTML с помощью селектора :after:
Это
Предположим, что есть элемент
а в разделе CSS добавьте текстовое содержимое после
темно-голубого цвета, используя селектор :after:
h2:after{
content: «Linuxhint»;
цвет: темно-голубой;
}
В приведенном выше фрагменте кода добавляется содержимое и устанавливается темно-голубой цвет:
Вывод содержит комбинацию элемента «
» и свойства содержимого вместе со свойством цвета CSS.
Использование селектора :hover
Селектор « hover » используется для стилизации элементов при наведении мыши.
Его можно применить к каждому элементу HTML. Например, этот эффект применяется к тегу «
» в приведенном ниже примере.
Пример
Предположим, есть тег « », к которому будет применяться эффект наведения:
Наведите курсор сюда
Теперь в части CSS прикрепите селектор при наведении к элементу HTML и добавьте свойства цвета, которые применяются при наведении:
h2:hover{
color: darkcyan;
}
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вывод показывает, что цвет текста меняется с черного на темно-голубой при наведении курсора мыши.
Сочетание :after с селекторами :hover
Селектор :after можно использовать с :hover для создания более интерактивного и удобного дизайна.
Пример
Например, тег «
» используется и содержит некоторые данные.
эффект наведения путем написания обоих селекторов в одной строке: h2:hover::after{
content: «Linuxhint»;
цвет: темно-голубой;
}
В приведенном выше фрагменте кода оба селектора написаны в одной строке вместе с элементом HTML и предоставляют значение свойства content и color.
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вывод показывает, что содержимое добавляется после наведения курсора мыши на элемент.
Заключение
Чтобы объединить селекторы :after и :hover, напишите оба на одной строке перед выбранным элементом HTML. Свойство :after добавляет значение содержимого после элемента HTML на веб-странице. Селектор :hover выбирает элемент HTML и применяет свойства CSS при наведении курсора мыши. Эта статья успешно продемонстрировала, как комбинировать селекторы :after и :hover.
Об авторе
Abdul Moeed
Я разносторонний технический автор, который преуспевает в адаптивном решении проблем.
У меня есть талант разбивать сложные концепции на понятные термины, и мне нравится делиться своими знаниями и опытом с читателями всех уровней. Я всегда стремлюсь помочь другим расширить их понимание технологии.
Посмотреть все сообщения
:hover — CSS: Каскадные таблицы стилей
:hover Псевдокласс CSS соответствует, когда пользователь взаимодействует с элементом с помощью указывающего устройства, но не обязательно активирует его. Обычно он срабатывает, когда пользователь наводит курсор на элемент (указатель мыши).
/* Выбирает любой элемент при "зависании" */ а: наведите { оранжевый цвет; }
Стили, определенные псевдоклассом :active , будут переопределены любым последующим псевдоклассом, связанным со ссылкой ( :link , :visited или :active ), который имеет как минимум равную специфичность. Чтобы правильно оформить ссылки, поместите правило :hover после правил :link и :visited , но перед правилом :active , как определено LVHA-порядком : :link — 9 0141 : посетил — :hover — :active .
:hover проблематичен на сенсорных экранах. В зависимости от браузера :hover псевдокласс может никогда не совпадать, совпадать только на мгновение после прикосновения к элементу или продолжать совпадать даже после того, как пользователь перестал касаться и до тех пор, пока пользователь не коснется другого элемента. Веб-разработчики должны убедиться, что контент доступен на устройствах с ограниченными или отсутствующими возможностями зависания.Синтаксис
:наведите
Примеры
Базовый пример
HTML
Попробуйте навести курсор на эту ссылку.
УСБ
а {
фоновый цвет: голубой;
переход: фоновый цвет .5s;
}
а: наведите {
цвет фона: золото;
} Результат
Галерея изображений
Вы можете использовать псевдокласс :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только при наведении указателя мыши на миниатюру.
См. эту демонстрацию для возможной подсказки.
:checked (применительно к скрытым переключателям), см. в этой демонстрации, взятой со справочной страницы :checked. Технические характеристики
| Спецификация | Комментарий | Обратная связь |
|---|---|---|
| HTML Living Standard Определение ‘:hover’ в этой спецификации. | WHATWG HTML GitHub выдает | |
| Селекторы уровня 4 Определение ‘:hover’ в этой спецификации. | Позволяет применять :hover к любому псевдоэлементу. | Рабочая группа CSS составляет черновики ошибок GitHub |
| Селекторы уровня 3 Определение ‘:hover’ в этой спецификации.  | ||
| CSS уровня 2 (редакция 1) | Исходное определение. |
Совместимость с браузером
Таблица совместимости на этой странице создана на основе структурированных данных. Если вы хотите внести свой вклад в данные, посетите https://github.com/mdn/browser-compat-data и отправьте нам запрос на включение.
1
1
См. ошибку 926665.
1