it-swarm.com.ru

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

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

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

299
Jitendra Vyas

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

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

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

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

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

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

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

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

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


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

436
BoltClock

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

84
sandeep

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

пример 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:"ಕನ್ನಡ";
}
5
Rao

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

3
subindas pm

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
bbrinx