Як записати: умова наведення курсора для: до і після: після?

347

Як написати :hoverта :visitedумовити a:before?

Я намагаюся, a:before:hoverале це не працює

488

Це залежить від того, що ви насправді намагаєтесь зробити.

Якщо ви просто хочете застосувати стилі до :beforeпсевдоелементу, коли aелемент відповідає псевдокласу, вам потрібно написати a:hover:beforeабо a:visited:beforeзамість цього. Зауважте, що псевдоелемент надходить після псевдокласу (і насправді, в самому кінці всього селектора). Зауважте також, що це дві різні речі; називаючи їх обома "псевдоселекторами", вас бентежить, коли ви зіткнетесь із проблемами синтаксису, як ця.

Якщо ви пишете CSS3, ви можете позначити псевдоелемент з подвійними двокрапками, щоб зробити це розрізнення чіткішим. Отже, a:hover::beforeі a:visited::before. Але якщо ви розробляєте для застарілих веб-переглядачів, таких як IE8 і старіші, то ви можете піти з використання однократних кольорів просто чудово.

Цей специфічний порядок псевдокласів та псевдоелементів зазначено у специфікації :

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

Послідовність простих селектор являє собою ланцюжок простих селектор, що не розділених комбінатора. Це завжди починається з селектора типу або універсального селектора. Жоден інший селектор типу або універсальний селектор не допускається в послідовності.

Селектор простого або селектор типу, універсальний селектор, селектор атрибуту, селектор класу, селектор ідентифікатора, або псевдо-клас.

Псевдоклас - простий селектор. Псевдоелемента, однак, немає, хоча він нагадує простий селектор.

Однак для псевдокласів, що виконуються користувачем, таких як :hover¹ , якщо вам потрібно, щоб цей ефект застосовувався лише тоді, коли користувач взаємодіє із самим псевдоелементом, але не з aелементом, то це неможливо, крім іншого через нечітке вирішення залежно від компонування. . Як випливає з тексту, стандартні псевдоелементи CSS наразі не можуть мати псевдокласи. У цьому випадку вам потрібно буде застосувати :hoverдо фактичного дочірнього елемента замість псевдоелемента.

¹ _{Звичайно, це не стосується псевдокласів, таких як :visitedпитання, оскільки псевдоелементи не є посиланнями.}

— BoltClock
джерело

27

Слід зазначити, що це наводить курсор на батьківський елемент - що спричиняє нанесення декору, навіть якщо :: після псевдоелемента не знаходиться під мишею, доки його батьківський.

— SamGoody

6

Слід також зазначити, що існує ряд речей, які не відповідають на це через спосіб визначення правил компонування - наприклад text-decoration.

— Кріс Кричо

1

@Chris Krycho: Дійсно, я справді маю пояснення цього конкретного питання стосовно псевдоелементів тут . Звичайно, варто уточнити, що сама проблема не має зв’язку з селекторами псевдокласу / псевдоелементів , але, як ви зазначаєте, проблема макета.

— BoltClock

@BoltClock Я підтримав цю відповідь дуже скоро після того, як я залишив цей коментар. Huzzah.

— Кріс Кричо

2

Товста кишка (:) позначає псевдокласи і подвійну двокрапку (: :) позначає псевдоелементи. Тож має бути: hover :: before

— mikkelbreum

107

Напишіть a:hover::beforeзамість a::before:hover: приклад .

— пісок
джерело

2

@mikkelbreum у вас є посилання, щоб довести це?

— ши

3

@bungeshea: Це синтаксис CSS3. Дивіться коментарі під моєю відповіддю (а також мою останню редакцію). Назвати це "правильним синтаксисом" трохи неточно, хоча тому, що для CSS1 / 2 псевдоелементів дозволені як одиночні, так і подвійні кольори. Я б назвав це рекомендованим синтаксисом, тому що єдина причина продовжувати використовувати застарілий синтаксис сьогодні - це підтримка IE8 та старіших версій.

— BoltClock

@mikkelbreum @sheabunge більше інформації про CSS2 :afterпроти CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (сингл :має кращу підтримку)

— travis

це не працює для підкреслення :( jsfiddle.net/porzechowski/u5dhthvq Будь ласка, додайте також дисплей: inline-block; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

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

Приклад 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:"ಕನ್ನಡ";
}

— Рао
джерело

1

Це прекрасна відповідь. Насправді, це мене надихнуло трохи розширити вашу скрипку , збільшивши розмір шрифту проміжного тексту до 24 пікселів, щоб відповідати тексту заміни, додав 3 нерозривні пробіли до та після тексту заміни, щоб вони займали однакову ширину, і стилі a:hover::beforeз text-decoration: underline, що призводить до того , підкреслення , щоб забрати червоний колір тексту заміни.

— Дейв Ленд

4

Спробуйте використовувати .card-listing:hover::after hoverі afterвикористовувати ::його буде працювати

— субінди вечора
джерело

1

Відповідь 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

— bbrinx
джерело

-2

Ви також можете обмежити свою дію лише одним класом, скориставшись правою загостреною дужкою (">"), як я це зробив у цьому коді:

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

— Стефан Грюенвальд
джерело