Как написать: условие наведения для 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-селектор, или псевдокласс.

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

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


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


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


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

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

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


ответ 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 класс