hover使用技巧

最新推荐文章于 2024-04-19 15:57:51 发布

weixin_44430496

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量1.7k

点赞数 4

分类专栏： CSS 文章标签： css css3 javascript html5

本文链接：https://blog.csdn.net/weixin_44430496/article/details/105420995

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

元素在hover状态时:

1.可以设置自己或后代元素的属性。

2.可以设置自己之后兄弟元素的属性。

3.不能设置祖先元素。（css根本就没有父元素的选择器）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #zxw{
                width: 400px;height: 400px;background: #000;
            }
            .zxw2{
                width: 150px;height: 400px;background: #ff0000;
            }
            /*.zxw2:hover{ //设置自己
                width: 300px;height: 300px;background: #00ff00;
            }*/


            /*#zxw:hover .zxw2{ //设置儿子元素的属性
                width: 300px;height: 300px;background: #00ff00;
            }*/
            /*#zxw:hover .zxw2 p{ //设置孙子元素的属性
                color: blue;font-size: 30px;
            }*/
            

            /*#zxw3:hover{
                color: #fff;font-size: 20px;
            }*/
            /*#zxw3:hover+p{ //相邻选择器（紧贴zxw3的元素，不包括本身）
                color: #fff;font-size: 20px
            }*/
            #zxw3:hover~p{//兄弟选择器（不包括本身，只可选择到之后的
所有兄弟元素）
                color: #fff;font-size: 20px;
            }
        </style>
    </head>
    <body>      
        <div id="zxw">
            <div class="zxw2">
                <p>我要自学网</p>
                <p>我要自学网</p>
                <p id="zxw3">我要自学网</p>
                <p>我要自学网</p>
                <p>我要自学网</p>
            </div>
        </div>
    </body>
</html>