Cum să scrii:hover "și": a vizitat starea de `o:înainte?
Am'm încercat o:înainte de a:hover
dar's nu funcționează
Acest lucru depinde de ceea ce ai're, de fapt, încercarea de a face.
Dacă pur și simplu doriți să aplicați stiluri de a o :înainte de
pseudo-element atunci când un element se potrivește o pseudo-clasă, aveți nevoie pentru a scrie a:hover:înainte de " sau " a: - a vizitat:înainte
în loc. Notificare pseudo-element de vorba după pseudo-class (și, de fapt, la sfârșitul întregului selector). Observați, de asemenea, că acestea sunt două lucruri diferite; numindu-i pe amândoi "pseudo-selectoare" se va confunda o dată tu a alerga în probleme de sintaxă, cum ar fi aceasta.
Daca're scris CSS3, puteți desemna un pseudo-element cu duble coloane pentru a face această distincție mai clară. Prin urmare, a:hover::înainte de "și": a vizitat::înainte de
. Dar dacă te're în curs de dezvoltare pentru moștenirea browsere, cum ar fi IE8 și mai mari, atunci puteți obține departe cu ajutorul singure două puncte foarte bine.
Această specific scopul de pseudo-clase și pseudo-elemente este menționat în spec:
O pseudo-element poate fi adăugat la ultima secvență de simplu selectoare într-un selector.
O secvență de simplu selectoare este un lanț de simplu selectoare care nu sunt separate printr-un combinator. Se începe întotdeauna cu un tip selector sau un selector universal. Nici un alt tip selector sau selector universal este permis în secvență.
Un simplu selector este fie un tip selector selector universal, atribut selector selector de clasă, selector ID, sau pseudo-clasă.
O pseudo-clasă este un simplu selector. Un pseudo-element, cu toate acestea, nu este, chiar dacă se aseamănă cu un simplu selector.
Cu toate acestea, pentru user-acțiune pseudo-clase, cum ar fi :hover
1, dacă aveți nevoie de acest efect să se aplice numai atunci când utilizatorul interacționează cu pseudo-element de sine, dar nu " un " element, atunci acest lucru nu este posibil decat prin unele obscure layout-dependente soluție. Ca implicite de text, standard CSS pseudo-elemente, în prezent, nu au pseudo-clase. În acest caz, va trebui să se aplice `:hover la un copil element în loc de un pseudo-element.
1 desigur, acest lucru nu se aplică la link-ul de pseudo-clase, cum ar fi :au vizitat
ca în întrebare, deoarece pseudo-elementele sunt't link-uri.
Scrie a:hover::înainte de "în loc de" o::înainte de a:hover
: [exemplu](
Pentru a schimba link-ul de meniu's text pe mouseover. (Altă limbă text pe hover) aici este
[jsfiddle exemplu][1]
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's răspunsul este corect. Singurul lucru pe care vreau să adăugați este că, dacă doriți să selectați doar pseudo element, a pus într-un interval.
De exemplu:
<li><span data-icon='u'></span> List Element </li>
în loc de:
<li> data-icon='u' List Element</li>
În acest fel puteți spune pur și simplu
ul [data-icon]:hover::before {color: #f7f7f7;}
care va evidenția numai pseudo element, nu întregul li element
Puteți restricționa, de asemenea, acțiunea ta pentru doar o singură clasă, folosind dreptul de subliniat suportul (">"), cum am făcut și în acest cod:
<!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>
Notă: hover:înainte de a comuta funcționează doar pe .test1 clasa