吃饱啦思考一下CSS hover

开心了才会思考

不错的晚餐.jpg

让我掉坑里的问题、、、

相信学前端的对CSS hover都很熟悉吧。。。接下啦我分享一下我是怎么掉在hover这个坑里的，问题出自我的女朋友。她在做一个网站，大家应该逛过不少网站，比如淘宝。所有网站header部分的nav都会有hover的效果，至于是怎么实现的。这就看程序猿的心情啦。

hover 的第一种情况——兄弟

这是两个兄弟DIV.png

老二的背景发生变化.png

下面是代码。
看代码之前我强调一点，两个级别一样的div产生hover效果时应该这样写

//这里的hover是当鼠标指向class名为class1的Div时 class名为class2的Div发生改变
.class1:hover+.class2{
}

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>HOVER</title>
        <style type="text/css">
            .wrap ,.box{
                height: 100px;
                text-align: center;
                line-height: 100px;
                width: 100px;
                background: cyan;
                border: 1px solid black;
                display: inline-block;
            }
            
            .wrap:hover+.box{
                background: red;
            }                                   
        </style>
    </head>

    <body>
        <div class="wrap">我是老大
        </div>
        <div class="box">我是老二
        </div>

    </body>
    <script type="text/javascript">
    </script>

</html>

hover 的第二种情况——self（本身）

这个简单啦，我就不多说啦

![
self.png . . .]
](http://upload-images.jianshu.io/upload_images/2725302-9dea60e65e92c2a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

selfHover.png

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>HOVER</title>
        <style type="text/css">
            .wrap{
                height: 100px;
                text-align: center;
                line-height: 100px;
                width: 100px;
                background: cyan;
                border: 1px solid black;
                display: inline-block;
            }
            
            .wrap:hover{
                background: red;
            }                                   
        </style>
    </head>

    <body>
        <div class="wrap">我是老大
        </div>
        
    </body>
    <script type="text/javascript">
    </script>

</html>

hover 的第三种情况——兄弟的儿子

![WNDEL%)W_XCZ1~T{7]S40)T.png](http://upload-images.jianshu.io/upload_images/2725302-965c4ac37daa84dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
———————————————————————————
![R]HF3EP(KTY~2](}$_]7K9N.png](http://upload-images.jianshu.io/upload_images/2725302-99d587f2b75a743b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里我要说的是兄弟之间老大可以直接hover到老二的儿子。但老大的儿子不到hover到老二的儿子。也就是说兄弟不但可以影响到兄弟，还可以影响到兄弟的儿子。但是兄弟的儿子之间互不影响


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>3D旋转</title>
        <style type="text/css">
            .wrap ,.box{
                height: 100px;
                text-align: center;
                width: 100px;
                background: cyan;
                border: 1px solid black;
                display: inline-block;
            }
            .box1{
                height: 60px;
                width: 60px;
                background: peachpuff;
            }
            .wrap:hover+.box .box1{
                background: red;
            }                                   
        </style>
    </head>

    <body>
        <div class="wrap">我是老大
        </div>
        <div class="box">
            <div class="box1">我是老二的儿子</div>
            
        </div>

    </body>
    <script type="text/javascript">
    </script>

</html>

说的这里也就应该结束啦。。我是一只菜鸟。就是喜欢死折腾。

吃饱啦 思考一下CSS hover