Maison > Article > interface Web > css : Comment utiliser la pseudo-classe de survol

css : Comment utiliser la pseudo-classe de survol

一个新手original: 2017-10-20 11:05:593609parcourir

: L'utilisation du survol, c'est-à-dire les paramètres de style effectués lorsque le pointeur de la souris se déplace dans l'élément

Exemple 1

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            width: 300px;
            margin-top: 10px;
            background: #ff0000;
        }
        ul li:hover{
            background: #000000;
        }
    </style></head><body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul></body></html>

La situation ci-dessus existe lorsque le pointeur de la souris se déplace dans l'élément, via :hover fait que l'élément lui-même change un nouveau style

Exemple 2

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover .content{
            background: #000000;
        }
    </style></head><body>
    <p class="container">
        <p class="content"></p>
    </p></body></html>

Dans l'exemple ci-dessus, lorsqu'il existe une relation parent-enfant, vous pouvez modifier le style de l'enfant via le :hover Changed du parent, écrit comme .container:hover .content, il y a un espace après le survol mais , child: hover ne peut pas changer le style du parent ; parent

Exemple 3

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid #ff9f5a;
        }
        .content{
            width: 100px;
            height: 100px;
            background: #27e7ff;
        }
        .container:hover +.content{
            background: #000000;
        }
    </style></head><body>
    <p class="container"></p>
    <p class="content"></p></body></html>

Dans l'exemple ci-dessus, lorsque les deux éléments ne sont pas une relation parent-enfant mais une relation fraternelle, alors passez .container:hover .content Cette méthode d'écriture n'est pas valide, vous devez passer Le signe "+", c'est-à-dire .container:hover +.content peut afficher l'effet mais faites attention à l'ordre des deux éléments ; ~

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!

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：Des vétérans résument 10 méthodes d'apprentissage qui entravent le progrèsArticle suivant：Des vétérans résument 10 méthodes d'apprentissage qui entravent le progrès

Articles Liés

Voir plus