将鼠标悬停在同级元素上时，如何更改元素的样式？

Question

除了三个垂直堆叠的框外，我还有一个h1，我希望h1根据鼠标悬停在哪个框上来更改颜色：

我尝试了以下方法，但是没有运气：

  #a:hover ~ #b {
        background: #ccc
    }

有什么方法可以使用CSS或Javascript做到这一点？

HTML的结构：

<div class="logo">

  <div class="squares">
    <div id="square1"></div>
    <div id="square2"></div>
    <div id="square3"></div>
  </div>

  <h1> korius</h1>
  <p> Personalized web-solutions </p>

</div>