Jak napisać: najechanie na warunek dla: przed i po: po?

Odpowiedzi:

488

To zależy od tego, co naprawdę próbujesz zrobić.

Jeśli chcesz po prostu zastosować style do :beforepseudoelementu, gdy aelement pasuje do pseudo-klasy, musisz napisać a:hover:beforelub a:visited:beforezamiast tego. Zwróć uwagę, że pseudoelement występuje po pseudo-klasie (a właściwie na samym końcu całego selektora). Zauważ też, że są to dwie różne rzeczy; nazywanie ich oboma „pseudo-selektorami” wprowadzi cię w błąd, gdy napotkasz problemy ze składnią, takie jak ta.

Jeśli piszesz CSS3, możesz oznaczyć pseudoelement podwójnymi dwukropkami, aby rozróżnić to rozróżnienie. Stąd a:hover::beforei a:visited::before. Ale jeśli tworzysz starsze przeglądarki, takie jak IE8 i starsze, możesz bez problemu używać pojedynczych dwukropków.

Ta szczególna kolejność pseudoklas i pseudoelementów jest określona w specyfikacji :

Jeden pseudoelement może być dołączony do ostatniej sekwencji prostych selektorów w selektorze.

Sekwencja prostych przełączników jest łańcuchem prostym selektory, które nie są oddzielone combinator. Zawsze zaczyna się od selektora typu lub selektora uniwersalnego. Żaden inny typ lub uniwersalny selektor nie jest dozwolony w sekwencji.

Selektor proste jest albo przełącznik rodzaju selektor uniwersalny selektor atrybutem klasy selektor selektor ID, lub pseudo klasy.

Pseudoklasa to prosty selektor. Jednak pseudoelement nie jest, chociaż przypomina prosty selektor.

Jednak w przypadku pseudoklasy działania użytkownika, takiej jak :hover1 , jeśli ten efekt ma być zastosowany tylko wtedy, gdy użytkownik wchodzi w interakcję z samym pseudoelementem, ale nie z aelementem, nie jest to możliwe inaczej niż poprzez pewne niejasne obejście zależne od układu . Jak sugeruje tekst, standardowe pseudoelementy CSS nie mogą obecnie mieć pseudoklas. W takim przypadku konieczne będzie zastosowanie :hoverdo rzeczywistego elementu potomnego zamiast pseudoelementu.

1 Oczywiście nie dotyczy to pseudoklas link, takich :visitedjak w pytaniu, ponieważ pseudoelementy nie są linkami.

BoltClock
źródło
27
Należy zauważyć, że powoduje to najechanie kursorem na element nadrzędny - co powoduje zastosowanie dekoracji, nawet jeśli pseudoelement :: after nie znajduje się pod myszą, dopóki jego element nadrzędny jest.
SamGoody
6
Należy również zauważyć, że istnieje wiele rzeczy, które nie reagują na to ze względu na sposób określania reguł układu - np text-decoration.
Chris Krycho
1
@Chris Krycho: Rzeczywiście - I rzeczywiście zdarzy się, że wyjaśnienie tej konkretnej kwestii w odniesieniu do pseudo-elementy tutaj . Oczywiście warto wyjaśnić, że sam problem nie ma związku z selektorami pseudoklasy / pseudoelementów , ale jest, jak zauważyłeś, problemem związanym z układem.
BoltClock
@BoltClock I upvoted że odpowiedź bardzo krótko po tym, jak opuścił ten komentarz. Huzzah.
Chris Krycho
2
Sinlge dwukropek (:) oznacza pseudoklasy, a dwukropek (: :) oznacza pseudoelementy. Powinno to być: hover :: before
mikkelbreum
107

Napisz a:hover::beforezamiast a::before:hover: przykład .

sandeep
źródło
2
@mikkelbreum czy masz odniesienie, aby to udowodnić?
shea
3
@bungeshea: To jest składnia CSS3. Zobacz komentarze pod moją odpowiedzią (a także moją ostatnią edycję). Jest jednak trochę niedokładne nazywanie go „poprawną” składnią, ponieważ dozwolone są zarówno pojedyncze, jak i podwójne dwukropki dla pseudoelementów CSS1 / 2. Zamiast tego nazwałbym to zalecaną składnią, ponieważ jedynym powodem dalszego korzystania ze starszej składni jest obsługa IE8 i starszych wersji.
BoltClock
@mikkelbreum @sheabunge więcej informacji na temat CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (singiel :ma lepsze wsparcie)
Travis
nie działa dla podkreślenia :( jsfiddle.net/porzechowski/u5dhthvq Należy dodać również display: inline-block; jsfiddle.net/porzechowski/u89fo4oq
Plusz
7

Aby zmienić tekst łącza menu po najechaniu kursorem myszy. (Tekst w innym języku po najechaniu kursorem) tutaj jest

przykład 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:"ಕನ್ನಡ";
}
Rao
źródło
1
To urocza odpowiedź. W rzeczywistości zainspirowało mnie to do lekkiego przedłużenia skrzypiec poprzez zwiększenie rozmiaru czcionki tekstu zakresu do 24 pikseli w celu dopasowania do tekstu zastępczego, dodałem 3 nierozdzielające spacje przed i po tekście zastępczym, aby zajmowały tę samą szerokość, oraz stylizowany a:hover::beforez text-decoration: underline, co powoduje podkreślenie odebrać czerwony kolor tekstu zastępczego.
Dave Land,
4

Spróbuj użyć .card-listing:hover::after hoveri afterużywać ::go będzie działać

subindas pm
źródło
1

Odpowiedź BoltClock jest poprawna. Jedyne, co chcę dołączyć, to to, że jeśli chcesz tylko wybrać pseudo element, wstaw zakres.

Na przykład: 

<li><span data-icon='u'></span> List Element </li>

zamiast:

<li> data-icon='u' List Element</li>

W ten sposób możesz po prostu powiedzieć

ul [data-icon]:hover::before {color: #f7f7f7;}

który podświetli tylko pseudo element, a nie cały element li

bbrinx
źródło
-2

Możesz również ograniczyć swoje działanie do jednej klasy, używając prawego spiczastego nawiasu („>”), jak to zrobiłem w tym kodzie:

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

Uwaga: Hover: before switch działa tylko w klasie .test1

Stefan Gruenwald
źródło