css：hover伪类的使用

时间 2019-11-16

标签 css hover 使用栏目 CSS 繁體版

原文原文链接

：hover的使用，即当鼠标指针移入元素时，所作出的样式设置html

示例一

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

以上状况存在于当鼠标指针移入元素，经过：hover使该元素自身改变新的样式spa

示例二

<!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>
    <div class="container">
        <div class="content"></div>
    </div>
</body>
</html>

以上示例中，当存在父子关系的时候，能够经过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；可是，子级：hover改变不了父级的样式指针

示例三

<!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>
    <div class="container"></div>
    <div class="content"></div>
</body>
</html>

以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则经过 .container:hover .content这样的写法是无效的，则须要经过“+”号，即 .container:hover +.content才能显示出效果；可是要注意两个元素的前后顺序哦~
code

不足之处，请多多指教…htm