web-dev-qa-db-fra.com

Comment écrire: condition de survol pour a: avant et a: après?

Comment écrire la condition :hover et :visited pour a:before?

J'essaie a:before:hover mais ça ne marche pas

csscss-selectorspseudo-elementpseudo-class
299
Jitendra Vyas

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. Remarquez que le pseudo-élément vient après la pseudo-classe (et en fait, à la toute fin du sélecteur entier). Notez aussi que ce sont deux choses différentes; les appeler tous les deux "pseudo-sélecteurs" va vous dérouter 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 doubles points pour rendre cette distinction plus claire. Par conséquent, a:hover::before et a:visited::before. Mais si vous développez pour des navigateurs classiques tels que IE8 et les versions antérieures, vous pouvez vous en tirer en utilisant des deux-points.

Cet ordre spécifique de pseudo-classes et de pseudo-éléments est indiqué dans le spec :

Un pseudo-élément peut être ajouté à la dernière séquence de sélecteurs simples dans un sélecteur.

Une séquence de sélecteurs simples 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 un sélecteur de type, un sélecteur universel, un sélecteur d'attribut, un sélecteur de classe, un sélecteur d'identifiant ou une pseudo-classe. 

Une pseudo-classe est un simple sélecteur. Cependant, un pseudo-élément 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 only lorsque l'utilisateur interagit avec le pseudo-élément lui-même, mais pas avec l'élément a, vous ne pouvez pas utiliser cette solution de contournement. Comme l'indique le texte, les pseudo-éléments CSS standard ne peuvent actuellement pas avoir de pseudo-classes. Dans ce cas, vous devrez appliquer :hover à un élément enfant réel au lieu d'un pseudo-élément.

1Bien entendu, cela ne s'applique pas aux pseudo-classes de lien telles que :visited comme dans la question, car les pseudo-éléments ne sont pas des liens.

436
BoltClock

Écrivez a:hover::before au lieu de a::before:hover: exemple .

84
sandeep

Pour changer le texte du lien de menu au passage de la souris. (Texte en plusieurs langues en vol stationnaire) Voici le 

exemple 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:"ಕನ್ನಡ";
}
5
Rao

Essayez d'utiliser .card-listing:hover::afterhover et after en utilisant :: cela fonctionnera

3
subindas pm

La réponse de BoltClock est correcte. La seule chose que je souhaite ajouter est que, si vous souhaitez uniquement sélectionner le pseudo-élément, définissez une étendue. 

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 tout l'élément li

0
bbrinx