recherche

Maison  >  Article  >  interface Web  >  A quoi sert le survol en CSS ?

A quoi sert le survol en CSS ?

青灯夜游
青灯夜游original
2020-12-04 17:19:2011263parcourir

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;
    }

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;
        }

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

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

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

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

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>

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>

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!

php css 指针 选择器
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment positionner les éléments enfants CSS par rapport aux éléments parents ?Article suivant：Comment positionner les éléments enfants CSS par rapport aux éléments parents ?

Articles Liés

Voir plus