Comment écrire:hover condition pour un avant et un:après?
Comment écrire :hover et :visited condition a:before?
J'essaie a:before:hover mais ça ne marche pas
6 réponses
Cela dépend de ce que vous essayez réellement de faire.
Si vous souhaitez simplement appliquer des styles à un pseudo-élément :before lorsque l'élément a correspond à une pseudo-classe, vous devez écrire a:hover:before ou a:visited:before à la place. Notez que le pseudo-élément vient après La pseudo-classe (et en fait, à la toute fin du sélecteur entier). Notez également qu'ils sont deux choses différentes; les appeler tous les deux "pseudo-sélecteurs" va vous confondre une fois que vous rencontrez des problèmes de syntaxe tels que celui-ci.
Si vous écrivez CSS3, vous pouvez désigner un pseudo-élément avec des deux-points pour rendre cette distinction plus claire. Par conséquent, a:hover::before et a:visited::before. Mais si vous développez pour les navigateurs hérités tels que IE8 et plus, alors vous pouvez vous en sortir avec des deux-points simples très bien.
Cet ordre spécifique de pseudo-classes et de pseudo-éléments est indiqué dans la spécification :
Un pseudo-élément peut être ajouté à la dernière séquence de sélecteurs simples sélecteur.
Un séquence de simple sélecteurs est une chaîne de sélecteurs simples qui ne sont pas séparés par un combinateur. Il commence toujours par un sélecteur de type ou un sélecteur universel. Aucun autre sélecteur de type ou sélecteur universel n'est autorisé dans la séquence.
Un sélecteur simple est soit un sélecteur de type, un sélecteur universel, un sélecteur d'attribut, un sélecteur de classe, un sélecteur D'ID ou une pseudo-classe.
Une pseudo-classe est un simple sélecteur. Un le pseudo-élément, cependant, ne l'est pas, même s'il ressemble à un simple sélecteur.
Cependant, pour les pseudo-classes d'action utilisateur telles que :hover1, Si vous avez besoin de cet effet pour appliquer uniquement lorsque l'utilisateur interagit avec le pseudo-élément lui-même mais pas avec l'élément a, cela n'est pas possible autrement que par une solution de contournement obscure dépendante de la mise en page. Comme le laisse entendre le texte, les pseudo-éléments CSS standard ne peuvent pas actuellement avoir de pseudo-classes. Dans ce cas, vous aurez besoin de appliquer :hover à un élément enfant réel au lieu d'un pseudo-élément.
1bien sûr, cela ne s'applique pas aux pseudo-classes de lien telles que :visited comme dans la question, puisque les pseudo-éléments ne sont pas des liens.
Pour modifier le texte du lien de menu sur mouseover. (Texte de langue différente sur hover) voici le
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:"ಕನ್ನಡ";
}
Essayez d'utiliser .card-listing:hover::after hover et after utiliser ::, il travaillera
La réponse de BoltClock est correcte. La seule chose que je veux ajouter est que si vous voulez seulement sélectionner le pseudo élément, mettez un span.
Par exemple:
<li><span data-icon='u'></span> List Element </li>
Au Lieu de:
<li> data-icon='u' List Element</li>
De Cette façon, vous pouvez simplement dire
ul [data-icon]:hover::before {color: #f7f7f7;}
Qui ne mettra en évidence que le pseudo-élément, pas l'élément li entier
Vous pouvez également limiter votre action à une seule classe en utilisant le crochet pointu droit ( " > " ), comme je l'ai fait dans ce code:
<!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>
Note: Le hover: avant commutateur ne fonctionne que sur la .classe test1