Как написать условие :hover для:before и a:after в CSS?
Посмотреть обсуждение
Улучшить статью
Сохранить статью
- Уровень сложности: Easy
- Последнее обновление: 18 мая, 2022
Посмотреть обсуждение
Улучшить статью
Сохранить статью
Селекторы :before и :after в CSS используются для добавления содержимого до и после элемента. :hover — это псевдокласс, а :before и :after — псевдоэлементы. В CSS псевдоэлементы пишутся после псевдокласса.
Синтаксис:
a:hover::before {
// Свойство CSS
}
а: наведение :: после {
// Свойство CSS
} В CSS3 двойное двоеточие (::) используется для обозначения псевдоэлемента. Для IE8 или старше используется одно двоеточие (синтаксис CSS2).
Пример 1: В этом примере используется условие :hover для:before и a:after в элементе.
html
< Стиль > 1 > |
Выход:
HTML перед перемещением мыши.
для a:before и a:after в элементе.
html
|
Output:
HTML Before Mouse move over:
After Mouse move over :
CSS является основой веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений.
Вы можете изучить CSS с нуля, следуя этому руководству по CSS. и примеры CSS.
Псевдоклассы CSS
❮ Предыдущий Далее ❯
Что такое псевдоклассы?
Псевдокласс используется для определения специального состояния элемента.
Например, его можно использовать для:
- стилизации элемента при наведении на него указателя мыши
- Стиль посещенных и непосещенных ссылок по-разному
- Стиль элемента, когда он получает фокус
Mouse Over Me
Синтаксис
Синтаксис псевдоклассов:
селектор: псевдокласс {
свойство: значение;
}
Anchor Псевдоклассы
Ссылки могут отображаться по-разному:
Пример
/* непросмотренная ссылка */
a:link {
color: #FF0000;
}
/* посещено
ссылка */
a:visited {
color: #00FF00;
}
/* указатель мыши над ссылкой */
a:hover {
color: #FF00FF;
}
/* выбранная ссылка */
color: #0000FF;
}
Попробуйте сами »
Примечание: a:hover ДОЛЖЕН идти после a:link и a: посетил в определении CSS, чтобы быть эффективным! a:active ДОЛЖЕН идти после a: наведите курсор на в определении CSS, чтобы быть эффективным!
Имена псевдоклассов не чувствительны к регистру.
Псевдоклассы и HTML-классы
Псевдо-классы можно комбинировать с HTML-классами:
При наведении курсора на ссылку в примере она меняет цвет:
Пример
a.highlight:hover {
color: #ff0000;
}
Попробуйте сами »
Наведите указатель мыши на
Пример использования псевдокласса :hover на элементе
Пример
div:hover background : синий;
}
Попробуйте сами »
Простая всплывающая подсказка
Наведите указатель мыши на элемент
(например, всплывающую подсказку):
Наведите курсор на меня, чтобы отобразить элемент
.
Тада! А вот и я!
Пример
p {
отображение: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}
div:hover p {
display: block;
Попробуйте сами »
CSS — Псевдокласс :first-child
Псевдокласс :first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента.
Соответствует первому элементу
В следующем примере селектор соответствует любому элементу
, который является первым дочерним элементом любого элемента:
Пример
p:first-child
{
цвет синий;
}
Попробуйте сами »
Соответствует первому элементу
во всех элементахВ следующем примере селектор соответствует первому элементу во всех элементах
:
Пример
p i: первый ребенок
{
цвет синий;
}
Попробуйте сами »
Соответствует всем элементам
во всех первых дочерних элементахВ следующем примере селектор сопоставляет все элементы в элементах
, которые являются первыми дочерними элементами другого элемента:
Пример
p:first-child i
{
цвет: синий;
}
Попробуйте сами »
CSS — Псевдокласс :lang
:lang 9Псевдокласс 0052 позволяет вам определять специальные правила для разных языков.
В приведенном ниже примере :lang определяет кавычки для элементов с lang="no":
Пример
Некоторый текст
Немного текста.
Попробуйте сами »
Дополнительные примеры
Добавление различных стилей к гиперссылкам
В этом примере показано, как добавить другие стили к гиперссылкам.
Использование :focus
В этом примере показано, как использовать псевдокласс :focus.
Проверьте себя с помощью упражнений
Упражнение:
Установите красный цвет фона при наведении указателя мыши на ссылку.
<стиль> {
цвет фона: красный;
} <тело>Это заголовок.
Это абзац.
