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

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

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

Ответы

Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

Ответ 3

Изменить текст ссылки на текст при наведении курсора мыши. (Разный язык текста при наведении) здесь

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

Ответ 4

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

Ответ 5

Ответ 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

Ответ 6

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

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