Как написать условия :hover
и :visited
для a:before
?
Я пробую a:before:hover
, но это не работает.
Это зависит от того, что вы на самом деле пытаетесь сделать.
Если вы просто хотите применить стили к псевдоэлементу :before
, когда элемент a
соответствует псевдоклассу, вам нужно написать a:hover:before
или a:visited:before
. Обратите внимание, что псевдоэлемент идет после псевдокласса (и фактически в самом конце всего селектора). Заметьте также, что это две разные вещи; называя их оба "псевдоселекторами", вы запутаетесь, когда столкнетесь с синтаксическими проблемами, подобными этой.
Если вы пишете CSS3, вы можете обозначить псевдоэлемент двойным двоеточием, чтобы сделать это различие более четким. Отсюда a:hover::before
и a:visited::before
. Но если вы разрабатываете для устаревших браузеров, таких как IE8 и старше, то вы можете обойтись одинарными двоеточиями.
Этот конкретный порядок псевдоклассов и псевдоэлементов указан в spec:
Один псевдоэлемент может быть добавлен к последней последовательности простых селекторов в селекторе.
Последовательность простых селекторов - это цепочка простых селекторов, не разделенных комбинатором. Она всегда начинается с селектора типа или универсального селектора. Никакой другой селектор типа или универсальный селектор в последовательности не допускается.
простой селектор - это либо селектор типов, либо универсальный селектор, либо селектор атрибутов, либо селектор классов, либо селектор идентификаторов, либо псевдокласс.
Псевдокласс - это простой селектор. Псевдоэлемент, однако, таковым не является, хотя и похож на простой селектор.
Однако для псевдоклассов пользовательского действия, таких как :hover
1, если вам нужно, чтобы этот эффект применялся только когда пользователь взаимодействует с самим псевдоэлементом, но не с элементом a
, то это невозможно иначе, чем с помощью какого-то непонятного обходного пути, зависящего от макета. Как следует из текста, стандартные псевдоэлементы CSS в настоящее время не могут иметь псевдоклассы. В этом случае вам придется применить :hover
к действительному дочернему элементу, а не к псевдоэлементу.
1 Конечно, это не относится к псевдоклассам ссылок, таким как :visited
, как в вопросе, поскольку псевдоэлементы не являются ссылками.
Напишите a:hover::before
вместо a::before:hover
: [пример](
Для изменения текста ссылки меню при наведении мыши. (Текст на разных языках при наведении) здесь
[пример jsfiddle][1]
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:"ಕನ್ನಡ";
}
Попробуйте использовать .карта-лист выглядит следующим образом:при наведении::после
парить
и после
через ::
это Виль работать
BoltClock'ы ответ является правильным. Единственное, что я хочу добавить, что если вы хотите выбрать только псевдо элемент, поместить в промежуток.
Например:
<li><span data-icon='u'></span> List Element </li>
вместо:
<li> data-icon='u' List Element</li>
Таким образом, вы можете просто сказать
ul [data-icon]:hover::before {color: #f7f7f7;}
которые только подчеркивают псевдо-элемент, а не весь элемент li
Вы также можете ограничить свои действия только одного класса, используя правильно указал кронштейн (" и>") Смотрите, как я сделал в этом коде:
<!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>
Примечание: при наведении:прежде чем переключатель работает только на .класс тест1