伪类hover的进阶用法

伪类在各位前端攻城狮的眼里肯定不陌生，但是你以为hover伪类只能修改当前元素本身？
那你就错了，来看看吧！

:hover伪类的定义

定义和用法

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

说明

这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。

正题

当鼠标悬停在某个元素的时候，你想触发另外一个元素的效果，一般人想到的是使用js来搞定这个问题。
当然，一些动过脑筋的同学们一定会想如果能有:hover伪类搞定就好了，可是看了看:hover的定义，就打消了这个念头。

其实如果只改变该元素内其他元素的样式我们是可以做到的，聪明的你可能已经想到了办法。

两个嵌套的div，我们把鼠标悬停在外部的div，改变内部div的样式。
开始的时候是这样的：

        <div class="big">
            <div class="small"></div>
        </div>

       .big{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }
        .small{
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-50px;
            margin-top:-50px;
            width: 100px;
            height: 100px;
            background: orange;
            
        }

初始样式

我们鼠标悬停在大的div里，改变里面小的div样式，当鼠标悬停时我们来把小的div改成蓝色。

鼠标悬停样式

上代码！

       .big{
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }
        .big:hover .small{
            background: blue;
        }
        .small{
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-50px;
            margin-top:-50px;
            width: 100px;
            height: 100px;
            background: orange;         
        }

直接在伪类后面加上内部元素的类名，达到了我们的效果。
怎么样？比写js或者jq来的简单吧，css玩好了我们照样6的飞起。

知识补充

锚伪类一共有四个属性，分别是：未被访问状态，已访问状态，鼠标悬停状态和活动状态。

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

但是在设置的时候，如果不注意细节会导致设置无效化。
书写时应该按以下顺序来写:

:link > :visited > :hover > :active

同一元素的锚伪类，低级的不能写在高级的前面，否则代码不会生效。