伪类在各位前端攻城狮的眼里肯定不陌生，但是你以为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
同一元素的锚伪类，低级的不能写在高级的前面，否则代码不会生效。
