学习笔记

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

css:hover伪类的使用

作者:狐灵科技 | 2020-02-06 20:27 |点击:

:hover的使用,即当鼠标指针移入元素时,所做出的样式设置

示例一

<!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使该元素自身改变新的样式

示例二

<!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才能显示出效果;但是要注意两个元素的先后顺序哦~

      不足之处,请多多指教…

内容来源于网络如有侵权请私信删除
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218