Home > Article > Web Front-end > Examples of usage of hover pseudo-class in CSS

Examples of usage of hover pseudo-class in CSS

黄舟Original: 2017-10-21 10:37:341878browse

: The use of hover, that is, the style setting made when the mouse pointer moves into the element

Example 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>

The above situation exists when the mouse pointer moves into an element and the element itself changes to a new style through:hover

Example 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>

In the above example , when there is a parent-child relationship, you can change the style of the child through the parent's :hover, written as

.container:hover .content, there is a space after hover; but , Child: hover cannot change the style of the parent

Example 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>

The above is the detailed content of Examples of usage of hover pseudo-class in CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of using CSS properties to implement a Christmas tree (picture)Next article：Example of using CSS properties to implement a Christmas tree (picture)

See more

Examples of usage of hover pseudo-class in CSS

Example 1

Example 2

Related articles