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

347

Comment écrire :hoveret :visitedconditionner a:before?

J'essaye a:before:hovermais ça ne marche pas

— Jitendra Vyas
source

488

Cela dépend de ce que vous essayez de faire.

Si vous souhaitez simplement appliquer des styles à un :beforepseudo-élément lorsque l' aélément correspond à une pseudo-classe, vous devez écrire a:hover:beforeou à la a:visited:beforeplace. Remarquez que le pseudo-élément vient après la pseudo-classe (et en fait, à la fin du sélecteur entier). Notez également que ce sont deux choses différentes; les appeler les deux "pseudo-sélecteurs" va vous embrouiller une fois que vous rencontrez des problèmes de syntaxe comme 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::beforeet a:visited::before. Mais si vous développez pour des navigateurs hérités tels que IE8 et les versions antérieures, vous pouvez très bien utiliser des deux-points simples.

Cet ordre spécifique de pseudo-classes et 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 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 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 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 :hover¹ , si vous avez besoin que cet effet s'applique uniquement lorsque l'utilisateur interagit avec le pseudo-élément lui-même mais pas avec l' aélément, cela n'est pas possible autrement que par une solution de contournement obscure dépendante de la disposition . 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.

¹ _{Bien sûr, cela ne s'applique pas aux pseudo-classes de liens :visitedcomme dans la question, car les pseudo-éléments ne sont pas des liens.}

— BoltClock
source

27

Il convient de noter que cela place le survol sur l'élément parent - ce qui entraîne l'application de la décoration même si le pseudo-élément :: after n'est pas sous la souris, tant que son parent l'est.

— SamGoody

6

Il convient également de noter qu'il existe un certain nombre de choses qui ne répondent pas à cela en raison de la façon dont les règles de mise en page sont spécifiées - par exemple text-decoration.

— Chris Krycho

1

@Chris Krycho: En effet - il se trouve que j'ai une explication de ce problème spécifique concernant les pseudo-éléments ici . Bien sûr, il convient de préciser que le problème lui-même n'a aucun lien avec les sélecteurs de pseudo-classe / pseudo-élément , mais comme vous le faites remarquer, un problème de mise en page.

— BoltClock

@BoltClock J'ai voté pour cette réponse très peu de temps après avoir laissé ce commentaire. Huzzah.

— Chris Krycho

2

Sinlge colon (:) désigne les pseudo-classes et double colon (: :) désigne les pseudo-éléments. Donc ce devrait être un: hover :: before

— mikkelbreum

107

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

— sandeep
source

2

@mikkelbreum avez-vous une référence pour le prouver?

— karité

3

@bungeshea: C'est la syntaxe CSS3. Voir les commentaires sous ma réponse (ainsi que ma récente édition). Il est un peu inexact de l'appeler "la" syntaxe correcte, car les deux-points simples et doubles sont autorisés pour les pseudo-éléments CSS1 / 2. Je l'appellerais plutôt la syntaxe recommandée , car la seule raison de continuer à utiliser la syntaxe héritée aujourd'hui est de prendre en charge IE8 et les versions antérieures.

— BoltClock

@mikkelbreum @sheabunge plus d'informations sur CSS2 :aftervs CSS3 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after (le single :a un meilleur support)

— travis

cela ne fonctionne pas pour le soulignement :( jsfiddle.net/porzechowski/u5dhthvq Veuillez ajouter également afficher: bloc en ligne; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

Pour modifier le texte du lien du menu au survol de la souris. (Texte en différentes langues en survol) 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:"ಕನ್ನಡ";
}

— Rao
source

1

Ceci est une belle réponse. En fait, cela m'a inspiré d' étendre légèrement votre violon en augmentant la taille de la police du texte de portée à 24 pixels pour correspondre au texte de remplacement, en ajoutant 3 espaces insécables avant et après le texte de remplacement afin qu'ils occupent la même largeur, et stylisé a:hover::beforeavec text-decoration: underline, ce qui amène le soulignement à prendre la couleur rouge du texte de remplacement.

— Dave Land

4

Essayez d'utiliser .card-listing:hover::after hoveret en afterutilisant ::ce wil travail

— subindas pm
source

1

La réponse de BoltClock est correcte. La seule chose que je veux ajouter est que si vous ne souhaitez sélectionner que le pseudo-élément, insérez une plage.

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 surbrillance que le pseudo-élément, pas tout l'élément li

— bbrinx
source

-2

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>

Remarque: Le survol: avant que le commutateur ne fonctionne que sur la classe .test1

— Stefan Gruenwald
source