css about: the use of hover

About the use of css :hover

When writing a special effect using css today, there was a problem:
the style set by the mouse does not change the
html code:

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

css style:

<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>

The original intention was to change the color of the background of .son2 through the box of .son1.
Results:
Nothing changed: the
study concluded.
First:
When the parent box is completely covered by the child box, the mouse passing event should be the parent box of .fa.
Second:
When the parent box needs to be changed The style of the box is parent-child relationship:
parent box can be used: hover child box

before the mouse passes

After the mouse passes:

When the box is a brother relationship:

Before the mouse passes:

After the mouse passes:

Of course, if you only modify the mouse passing style of .son1,
you can fully use .son1 :hover