Как написать: условие наведения для a:before и A: after?
как писать :hover
и :visited
условие a:before
?
Я пытаюсь a:before:hover
но это не работает
6 ответов
это зависит от того, что вы на самом деле пытаетесь сделать.
если вы просто хотите применить стили к :before
псевдо-элемент a
элемент соответствует псевдо-классу, вам нужно написать a:hover:before
или . Обратите внимание, что псевдо-элемент приходит после псевдокласс (и фактически, в самом конце всего селектора). Заметьте также, что это две разные вещи; называть их "псевдо-селекторами" будет путать вас, как только вы столкнетесь синтаксические проблемы, подобные этой.
если вы пишете CSS3, вы можете обозначить псевдо-элемент с двойными двоеточиями, чтобы сделать это различие более ясным. Следовательно,a:hover::before
и a:visited::before
. Но если вы разрабатываете для устаревших браузеров, таких как IE8 и старше, то вы можете уйти от использования одинарных двоеточий просто отлично.
этот конкретный порядок псевдоклассов и псевдо-элементов указан в spec:
один псевдо-элемент может быть добавлена к последней последовательности простых селекторов в селекторе.
A последовательность простых селекторов представляет собой цепочку простых селекторов, не разделенных комбинатором. Он всегда начинается с селектора типов или универсального селектора. Никакой другой селектор типа или всеобщий селектор не позволены в последовательности.
A простой селектор - это либо селектор типа, универсальный селектор, селектор атрибута селектора класса, ID-селектор, или псевдокласс.
псевдокласс-это простой селектор. Псевдо-элемент, однако, не является, хотя и напоминает простой селектор.
однако для псевдоклассов пользовательского действия, таких как :hover
1, если вам нужен этот эффект, чтобы применить только когда пользователь взаимодействует с самим псевдо-элементом, но не с a
элемент, то это невозможно, кроме как через некоторое неясное обходное решение, зависящее от макета. Как следует по тексту стандартные псевдоэлементы CSS в настоящее время не могут иметь псевдоклассов. В этом случае вам нужно будет применить :hover
к фактическому дочернему элементу вместо псевдо-элемента.
1конечно, это не относится к псевдоклассам ссылок, таким как :visited
как и в вопросе, поскольку псевдо-элементы не являются ссылками.
изменить текст ссылки Меню при наведении курсора мыши. (Другой текст языка при наведении) вот это
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 класс