css关于:hover的使用

关于css :hover的使用

今天使用css在写一个特效的时候出现了一个问题：
鼠标经过设置的样式不发生改变
html代码：

<div class="fa">
        <div class="son1">
        </div>
</div>
 <div class="son2"></div>

css样式：

<style>
.son1 {
        width: 30px;
        height: 30px;
        float: left;
        background: chartreuse;
        /* margin-left: -30px; */
    }

    .son2 {
        width: 30px;
        height: 30px;
        float: left;
        background: rebeccapurple;


    }

    .fa {
        width: 30px;
        height: 30px;
        float: left;
        background: blanchedalmond;
    }

    .son1:hover .son2 {
        background: red;
    }
</style>

本意想经过.son1的盒子使.son2背景变色
结果：
什么变化都没有：
研究得出结论
首先：
当父盒子被子盒子完全覆盖，鼠标经过事件应该为.fa的父盒子
其次：
当父盒子要改变样式的盒子为父子关系：
可以使用父盒子:hover 子盒子

鼠标经过前

鼠标经过后：

当盒子为兄弟关系:

鼠标经过前：

鼠标经过后：

当然如果仅仅修改.son1的鼠标经过样式
可以完全使用.son1 :hover