Explication détaillée de l'utilisation du sélecteur de survol en CSS-tutoriel CSS-php.cn

Explication détaillée de l'utilisation du sélecteur de survol en CSS

小云云

Libérer： 2017-12-05 13:20:24

original

2925 Les gens l'ont consulté

Parfois, vous devez utiliser les deux événements de souris mouseover et mouseout, mais écrire du js est plus compliqué et vous devez ajouter des événements d'écoute, donc les problèmes qui peuvent être résolus avec CSS doivent être résolus avec CSS autant que possible. peut améliorer les performances. Permettez-moi d'en parler ci-dessous. Compréhension de :hover :

Lorsque nous apprenions des applications informatiques, le professeur nous a appris à utiliser le sélecteur :hover pour compléter le menu déroulant. Avant, nous savions seulement comment l'utiliser, mais nous ne savions pas pourquoi nous l'utilisions de cette manière. Notez maintenant comment l'utiliser

Définition et utilisation

<.>Définition :

: le sélecteur de survol permet de sélectionner l'élément sur lequel flotte le pointeur de la souris.

:le sélecteur de survol s'applique à tous les éléments

Utilisation 1 :

Cela signifie : lorsque la souris survole le style a, le réglage de la couleur d'arrière-plan d'un Pour le jaune

a:hover
    { 
        background-color:yellow;
    }

Copier après la connexion

C'est l'utilisation la plus courante, il suffit de changer le style via un

Utilisation 2 :

Utilisez a pour contrôler le style des autres blocs :

Utilisez a pour contrôler le sous-élément b de a :

    .a:hover .b {
            background-color:blue;
        }

Copier après la connexion

Utilisez a pour contrôler l'élément frère de a c (élément frère) :

    .a:hover + .c {
            color:red;
        }

Copier après la connexion

Utilisez a pour contrôler l'élément d proche de a :

    .a:hover ~ .d {
            color:pink;
        }

Copier après la connexion

Pour résumer :

1. N'ajoutez rien au milieu pour contrôler les éléments enfants ;

2. '+' contrôle les éléments frères (éléments frères) ;

Exemple

Utiliser un bouton pour contrôler l'état de mouvement d'une boîte Lorsque la souris passe sur le bouton, la boîte s'arrête. Lorsque la souris s'éloigne, la boîte continue. pour bouger

code corps :

    <body>
        <p class="btn stop">stop</p>
        <p class="animation"></p>
    </body>

Copier après la connexion

style css :

    <style>
        .animation {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            animation: move 2s infinite alternate;
            -webkit-animation: move 2s infinite alternate;
        }
        @keyframes move {
            0% {
                transform: translate(-100px, 0);
            }
            100% {
                transform: translate(100px, 0);
            }
        }
        .btn {
            padding: 20px 50px;
            background-color: pink;
            color: white;
            display: inline-block;
        }
        .stop:hover ~ .animation {
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }
    </style>

Copier après la connexion

Obtenir l'effet :

Recommandations associées :