悬停元素，影响另一个元素

Question

当我悬停在#empresas之上时，不会影响#personas div的高度。为什么？

HTML

     <div id="hugeBanners">

        <div id="personas">
            <h3 class="personasText1">Servicios Para ti</h3>
        </div>

        <div id="empresas">
            <h3 class="empresasText1">Servicios Para tu Empresa</h3>
        </div>

      </div>

CSS

#personas {
width: 100%;
height: 40%;
position: absolute;
top:20%;
background-color: green;
cursor: pointer;
transition: height 0.2s ease;
}

#personas:hover {
height: 70%;
}

#personas:hover ~ #empresas {
height: 10%;
}

#empresas {
width: 100%;
height: 40%;
position: absolute;
bottom: 0;
background-color: aqua;
cursor:pointer;
transition: height 0.2s ease;
}

#empresas:hover {
height: 70%;
}

#empresas:hover ~ #personas {
height: 10%;
}

发生了什么事，因为当你将鼠标悬停在#personas之上时，它可以很好地工作，调整#empresas的高度。