hover操纵同级元素

最新推荐文章于 2024-02-28 11:08:51 发布

weixin_45043158

最新推荐文章于 2024-02-28 11:08:51 发布

阅读量435

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_45043158/article/details/106713711

版权

css 专栏收录该内容

3 篇文章

订阅专栏

hover操纵同级元素

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hover操纵同级元素</title>
        <style>
            .first {
                color: #f99;
            }
            /* 子代选择 */
            .first:hover > .first-child {
                color: #000
            }
            /* 相邻 */
            .first:hover + .second {
                color: rgba(0, 0, 0, 0.38);
            }
            .first:hover + .second > .third {
                color: #00F;
            }
            /* 非相邻，无效 */
            .first:hover + .fourth {
                color: red
            }
            /* + 用于同级选择; > 空格 用于后代选择 */
        </style>
    </head>
    <body>
        <div class='first'>trigger元素
            <div class="first-child">子元素</div>
        </div>
        <div class='second'>同级相邻元素
            <div class='third'>同级相邻元素子元素</div>
        </div>
        <div class="fourth">同级非相邻元素，无法改变</div>
    </body>
</html>