鼠标悬浮事件的hover的使用

最新推荐文章于 2024-06-19 09:42:28 发布

子夜时辰

最新推荐文章于 2024-06-19 09:42:28 发布

阅读量1.8k

点赞数 1

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_56132701/article/details/129163972

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

鼠标悬浮事件hover的使用

用法1：

表示当鼠标悬浮在a元素上时，a元素的背景颜色变成粉色

 .a:hover{
        background-color: pink;
    }

用法2：

用a来控制其他元素

用a来控制a的子元素

<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .a:hover{
        background-color: pink;
    }
    .a:hover .b{
        background-color: aqua;
    }
</style>
<body>
    <div class="a">
        <div class="b">

        </div>
    </div>   
</body>
</html>

用a来控制其相邻的兄弟元素

<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .c{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
   
    .a:hover +.c{
        background-color: aqua;
    }
</style>
<body>
    <div class="a">
        <div class="b">

        </div>
    </div>
    <div class="c">

    </div> 
    
</body>
</html>

用a来控制其普通兄弟元素

<style>
    .a{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .b{
        width: 50px;
        height: 50px;
        border: 1px solid red;
    }
    .c{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
    .d{
        width: 100px;
        height: 100px;
        border: 1px solid salmon;
    }
     .a:hover ~.d{
        background-color: pink;
    } 
</style>
<body>
    <div class="a">
        <div class="b">

        </div>
    </div>
    <div class="c">

    </div> 
    <div class="d">

    </div>
</body>
</html>