A quoi sert le survol en CSS ?-tutoriel CSS-php.cn

A quoi sert le survol en CSS ?

青灯夜游

Libérer： 2020-12-04 17:19:20

original

11121 Les gens l'ont consulté

En CSS, le sélecteur ":hover" est utilisé pour sélectionner l'élément sur lequel le pointeur de la souris flotte, puis définir le style de celui-ci. Le format de syntaxe est "element:hover{css style}; "; ":hover" est obligatoire à placer après ":link" et ":visited" (si présent) pour que le style puisse prendre effet.

A quoi sert le survol en CSS ?

Recommandations associées : "Enseignement de la programmation"

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

Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.

Dans la définition CSS, :hover doit venir après :link et :visited (si présent) pour que le style prenne effet.

:link selector définit le style des liens pointant vers des pages non visitées, :visited selector est utilisé pour définir des liens vers les pages visitées et :active selector est utilisé pour les liens actifs.

Utilisation du sélecteur css :hover

Utilisation 1 :

Ce quoi cela signifie que : lorsque la souris survole le style a, la couleur d'arrière-plan de a est définie sur 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 a

Utilisation 2 :

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

Utilisez a pour contrôler l'élément enfant b de a :

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

Copier après la connexion

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

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

Copier après la connexion

Utiliser 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. Ce qu'il y a au milieu Aucun Contrôle les éléments enfants ;

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

3. >

Exemple

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

Code corporel :

<body>
    <div class="btn stop">stop</div>
    <div class="animation"></div>
</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

Pour plus d'articles connexes, veuillez visiter le

Site Web PHP chinois ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!