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

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

322 голосов
/ 25 апреля 2011

Как записать :hover и :visited условие для a:before?

Я пытаюсь a:before:hover, но оно не работает

Ответы [ 6 ]

459 голосов
/ 25 апреля 2011

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

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

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

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

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

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

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

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

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

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

96 голосов
/ 25 апреля 2011

Запись a:hover::before вместо a::before:hover: пример .

6 голосов
/ 24 апреля 2013

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

Пример 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:"ಕನ್ನಡ";
}
3 голосов
/ 09 августа 2017

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

1 голос
/ 24 апреля 2017

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

0 голосов
/ 30 июля 2015

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

<!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>

Примечание: Наведение: переключатель до работает только на классе .test1

...