CSS之通过hover行为来修改其他元素样式

PS:通过hover行为只能获取到其子元素的节点,并修改子元素的样式,如果要修改其他节点样式,可以通过CSS选择器中的+ >等特殊选择器获取。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hover行为</title>

    <style>

        .contain{

            width: 100px;

            height: 100px;

            color: red;

        }

        .tip1,.tip2{

            background-color: aqua;

            color: blue;

            display: none;

        }

         //通过特殊选择器获取节点

         .contain:hover + .tip1{

            display: block;

        }

//通过获取子节点的方式获取节点

.contain:hover .tip2{

            display: block;

        } 

    </style>

</head>

<body>

    <div class="wrap">

        <div class="contain">

            点我有提示

            <div class="tip2">

                我是提示222

            </div>

        </div>

        <div class="tip1">

            我是提示111

        </div>

    </div>

</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_44273311/article/details/110558595