用hover操纵同级元素

最新推荐文章于 2022-06-16 15:15:33 发布

一个半路出家的人

最新推荐文章于 2022-06-16 15:15:33 发布

阅读量1.3w

点赞数 3

分类专栏：前端Html css Html 文章标签：前端 html css hover

前端Html 同时被 3 个专栏收录

28 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

Html

6 篇文章 0 订阅

订阅专栏

通过+号来操纵同级元素

只能操纵相邻的兄弟元素,也可操纵相邻同级元素的子元素

不相邻的同级元素不能操纵

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hover操纵同级元素</title>
        <style>
            .first {
                color: #5d756e;
            }

            .first:hover + .fourth {
                color: red
            }

            /*>或空格均可用于子代选择*/
            .first:hover > .first-child {
                color: #000000
            }

            .first:hover + .second {
                color: rgba(0, 0, 0, 0.38);
            }

            .first:hover + .second > .third {
                color: #0000FF;
            }


            /* ‘+’ 用于同级选择 */
            /* ‘>’ 或 ‘ ’ 用于后代选择 */

        </style>
    </head>
    <body>
        <div class='first'>计划hover元素
            <div class="first-child">hover元素的子元素</div>
        </div>
        <div class='second'>紧邻hover的下个同级元素
            <div class='third'>紧邻hover的下个同级元素的子元素</div>
        </div>
        <div class="fourth" style="">非紧邻hover的同级元素，无法改变</div>
    </body>
</html>

一个半路出家的人

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
用hover操纵同级元素

通过+号来操纵同级元素只能操纵相邻的兄弟元素,也可操纵相邻同级元素的子元素不相邻的同级元素不能操纵&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;hover操纵同级元素&lt;/
复制链接

扫一扫