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

最新推荐文章于 2023-11-23 20:47:07 发布

weixin_44273311

最新推荐文章于 2023-11-23 20:47:07 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44273311/article/details/110558595

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

weixin_44273311

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之通过hover行为来修改其他元素样式

PS：通过hover行为只能获取到其子元素的节点，并修改子元素的样式，如果要修改其他节点样式，可以通过CSS选择器中的+ >等特殊选择器获取。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">...
复制链接

扫一扫