Comment écrire les conditions :hover
et :visited
pour a:before
?
J'essaie d'écrire a:before:hover
mais ça ne fonctionne pas.
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). Remarquez également qu'il s'agit de deux choses différentes ; les appeler tous deux "pseudo-sélecteurs" va vous embrouiller lorsque vous rencontrerez des problèmes de syntaxe comme celui-ci.
Si vous écrivez CSS3, vous pouvez désigner un pseudo-élément par des doubles points pour rendre cette distinction plus claire. D'où a:hover::before
et a:visited::before
. Mais si vous développez pour des navigateurs existants, comme IE8 et les versions antérieures, vous pouvez vous contenter d'utiliser des points de suspension simples.
Cet ordre spécifique des pseudo-classes et des pseudo-éléments est indiqué dans la [spec] (http://www.w3.org/TR/selectors/#selector-syntax) :
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. Elle 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 sélecteur simple. Un pseudo-élément, en revanche, ne l'est pas, même s'il ressemble à un sélecteur simple.
Cependant, pour les pseudo-classes d'action utilisateur telles que :hover
1, si vous avez besoin que cet effet s'applique seulement lorsque l'utilisateur interagit avec le pseudo-élément lui-même mais pas avec l'élément a
, alors cela n'est pas possible autrement que par un obscur contournement dépendant de la mise en page. Comme le laisse entendre 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 plutôt qu'à un pseudo-élément.
1 Bien 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.
Écrire a:hover::before
au lieu de a::before:hover
: [exemple](
Changer le texte du lien du menu au passage de la souris. (Texte dans une langue différente au survol) voici le
[exemple jsfiddle][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:"ಕನ್ನಡ";
}
[1] :