Как написать: условие наведения для a: before и a: after?

Ответы:

488

Это зависит от того, что вы на самом деле пытаетесь сделать.

Если вы просто хотите применить стили к :beforeпсевдоэлементу, когда aэлемент соответствует псевдоклассу, вам нужно написать a:hover:beforeили a:visited:beforeвместо этого. Обратите внимание, что псевдоэлемент идет после псевдокласса (и фактически, в самом конце всего селектора). Обратите также внимание, что это две разные вещи; называя их обоими «псевдоселекторами», вы можете запутаться, если столкнетесь с такими проблемами синтаксиса, как эта.

Если вы пишете CSS3, вы можете обозначить псевдоэлемент двойными двоеточиями, чтобы сделать это различие более понятным. Отсюда a:hover::beforeи a:visited::before. Но если вы разрабатываете для устаревших браузеров, таких как IE8 и старше, то вы можете просто обойтись без использования двоеточий.

Этот конкретный порядок псевдоклассов и псевдоэлементов указан в спецификации :

Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.

Последовательность простых селекторов представляет собой цепочку простых селекторов, которые не разделенных комбинатора. Он всегда начинается с селектора типа или универсального селектора. Никакой другой тип селектора или универсальный селектор не допускается в последовательности.

Селектор простого либо селектор типа, универсальный селектор, селектор атрибута, селектор класса, селектор идентификатора, или псевдо-класс.

Псевдокласс - это простой селектор. Псевдоэлемент, однако, нет, хотя он и напоминает простой селектор.

Однако для псевдоклассов действий пользователя, таких как :hover1 , если вам нужно, чтобы этот эффект применялся только тогда, когда пользователь взаимодействует с самим псевдоэлементом, но не с этим aэлементом, то это невозможно, кроме как через неясный обходной путь, зависящий от макета. , Как следует из текста, стандартные псевдоэлементы CSS в настоящее время не могут иметь псевдоклассы. В этом случае вам потребуется применить :hoverк фактическому дочернему элементу вместо псевдоэлемента.

1 Конечно, это не относится к псевдоклассам ссылок, как, :visitedнапример, в вопросе, поскольку псевдоэлементы не являются ссылками.

BoltClock
источник
27
Следует отметить, что это накладывает указатель мыши на родительский элемент, что приводит к применению декорации, даже если псевдоэлемент :: after не находится под мышью, пока его родительский элемент находится.
SamGoody
6
Следует также отметить, что есть ряд вещей, которые не реагируют на это из-за способа указания правил компоновки - например text-decoration.
Крис Крычо
1
@Chris Krycho: Действительно - у меня действительно есть объяснение этой конкретной проблемы в отношении псевдоэлементов здесь . Конечно, стоит уточнить, что проблема сама по себе не связана с селекторами псевдоклассов / псевдоэлементов , но, как вы указали, проблема макета.
BoltClock
@BoltClock я upvoted , что ответ очень вскоре после того я оставил этот комментарий. Возгласы ликования.
Крис Крычо
2
Sinlge двоеточие (:) обозначает псевдоклассы, а двойное двоеточие (: :) обозначает псевдоэлементы. Так и должно быть: hover :: before
mikkelbreum
107

Напишите a:hover::beforeвместо a::before:hover: пример .

Сандип
источник
2
@mikkelbreum у вас есть ссылка, чтобы доказать это?
She
3
@bungeshea: это синтаксис CSS3. Смотрите комментарии под моим ответом (а также мои последние изменения). Немного неточно называть его «правильным» синтаксисом, потому что для псевдоэлементов CSS1 / 2 разрешены как одинарные, так и двойные двоеточия. Вместо этого я бы назвал это рекомендуемым синтаксисом, потому что единственная причина для продолжения использования унаследованного синтаксиса сегодня - это поддержка IE8 и старше.
BoltClock
@mikkelbreum @sheabunge больше информации о CSS2 :afterпротив CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (сингл :имеет лучшую поддержку)
travis
он не работает для подчеркивания :( jsfiddle.net/porzechowski/u5dhthvq Пожалуйста, добавьте также отображение: inline-block; jsfiddle.net/porzechowski/u89fo4oq
plusz
7

Чтобы изменить текст ссылки меню при наведении курсора. (Разный язык текста при наведении) вот

пример jsfiddle

HTML:

<a align="center" href="#"><span>kannada</span></a>

CSS:

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}
Рао
источник
1
Это прекрасный ответ. На самом деле, это вдохновило меня немного расширить вашу скрипку , увеличив размер шрифта для span-текста до 24px, чтобы он соответствовал замещающему тексту, добавил 3 неразрывных пробела до и после замещающего текста, чтобы они занимали одинаковую ширину, и стиле a:hover::beforeс text-decoration: underline, что приводит к тому , подчеркивание , чтобы забрать красный цвет текста замены.
Дейв Лэнд
4

Попробуйте использовать .card-listing:hover::after hoverи afterиспользовать ::его, будет работать

Subindas вечера
источник
1

BoltClock ответ правильный. Единственное, что я хочу добавить, это то, что если вы хотите выбрать только псевдоэлемент, поместите его в span.

Например: 

<li><span data-icon='u'></span> List Element </li>

вместо того:

<li> data-icon='u' List Element</li>

Таким образом, вы можете просто сказать,

ul [data-icon]:hover::before {color: #f7f7f7;}

который будет выделять только псевдоэлемент, а не весь элемент li

bbrinx
источник
-2

Вы также можете ограничить свое действие только одним классом, используя правую остроконечную скобку (">"), как я сделал в этом коде:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

Примечание. Переключатель hover: before работает только для класса .test1

Стефан Грюнвальд
источник