Come scrivere :hovere :visitedcondizionare a:before?
Ci sto provando a:before:hoverma non funziona
Come scrivere :hovere :visitedcondizionare a:before?
Ci sto provando a:before:hoverma non funziona
Risposte:
Questo dipende da cosa stai effettivamente cercando di fare.
Se desideri semplicemente applicare gli stili a uno :beforepseudo-elemento quando l' aelemento corrisponde a una pseudo-classe, devi scrivere a:hover:beforeo a:visited:beforeinvece. Si noti che lo pseudo-elemento viene dopo la pseudo-classe (e in effetti, alla fine dell'intero selettore). Nota anche che sono due cose diverse; chiamarli entrambi "pseudo-selettori" ti confonderà una volta che incontrerai problemi di sintassi come questo.
Se stai scrivendo CSS3, puoi indicare uno pseudo-elemento con due punti e virgola per rendere più chiara questa distinzione. Quindi, a:hover::beforee a:visited::before. Ma se stai sviluppando per i browser legacy come IE8 e precedenti, allora puoi cavartela usando i due punti semplicemente bene.
Questo ordine specifico di pseudo-classi e pseudo-elementi è indicato nelle specifiche :
Uno pseudo-elemento può essere aggiunto all'ultima sequenza di selettori semplici in un selettore.
Una sequenza di selettori semplici è una catena di selettori semplici che non sono separati da un combinatore. Inizia sempre con un selettore del tipo o un selettore universale. Nessun altro selettore di tipo o selettore universale è consentito nella sequenza.
Un selettore semplice è un selettore di tipo, un selettore universale, un selettore di attributi, un selettore di classe, un selettore ID o una pseudo-classe.
Una pseudo-classe è un semplice selettore. Uno pseudo-elemento, tuttavia, non lo è, anche se ricorda un semplice selettore.
Tuttavia, per le pseudo-classi di azioni dell'utente come :hover1 , se è necessario applicare questo effetto solo quando l'utente interagisce con lo pseudo-elemento stesso ma non con l' aelemento, ciò non è possibile se non attraverso una oscura soluzione dipendente dal layout . Come implicito nel testo, gli pseudo-elementi CSS standard non possono attualmente avere pseudo-classi. In tal caso, dovrai applicare :hoverun elemento figlio effettivo anziché uno pseudo-elemento.
1 Naturalmente, ciò non si applica al collegamento di pseudo-classi :visitedcome nella domanda, poiché gli pseudo-elementi non sono collegamenti.
text-decoration.
Scrivi a:hover::beforeinvece di a::before:hover: esempio .
:aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (single :ha un supporto migliore)
Per modificare il testo del collegamento al menu al passaggio del mouse. (Testo in lingua diversa al passaggio del mouse) ecco il
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:"ಕನ್ನಡ";
}
a:hover::beforecon text-decoration: underline, che causa la sottolineatura a prendere il colore rosso del testo sostitutivo.
Provare a utilizzare .card-listing:hover::after hovere aftercon ::esso il lavoro wil
La risposta di BoltClock è corretta. L'unica cosa che voglio aggiungere è che se vuoi selezionare solo lo pseudo elemento, inserisci un intervallo.
Per esempio:
<li><span data-icon='u'></span> List Element </li>invece di:
<li> data-icon='u' List Element</li>In questo modo puoi semplicemente dire
ul [data-icon]:hover::before {color: #f7f7f7;}che evidenzierà solo l'elemento pseudo, non l'intero elemento li
Puoi anche limitare la tua azione a una sola classe usando la parentesi quadra destra (">"), come ho fatto in questo codice:
<!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>
Nota: hover: before switch funziona solo sulla classe .test1