Cela signifie : lorsque la souris survole le style a, la couleur d'arrière-plan de a est définie sur jaune
1
2
3
4
a:hover
{
background -color:jaune;
}
C'est l'utilisation la plus courante, elle change simplement le style via un
Utilisation 2 :
Utilisez a pour contrôler le style des autres blocs :
Utilisez a pour contrôler un élément enfant b :
1
2
3
.a:hover .b {
couleur de fond : bleu
}
Utilisez a pour contrôler a frère Élément c (élément de même niveau):
1
2
3
.a:hover + .c {
en utilisant en utilisant en utilisant en utilisant en utilisant en utilisant en utilisant en utilisant en utilisant ‐ ‐ ‐ ‐ à travers ‐ ‐ . . . . . . .
Pour résumer :1. Il n'y a pas de sous-élément de contrôle au milieu ; 2. '+' contrôle les éléments frères (éléments frères) ; 3 '~' contrôle les éléments proches ; ExempleUtilisez un bouton pour contrôler l'état du mouvement. d'une boîte, lorsque la souris passe sur le bouton, la boîte s'arrête de bouger, et lorsque la souris s'éloigne, la boîte continue de bouger
Le sélecteur frère adjacent (+) peut sélectionner l'élément immédiatement après un autre élément, et les deux ont le même élément parent
Le sélecteur frère (~) peut trouver tous les nœuds frères derrière un élément spécifié