:hoverにおける複数のホバーエフェクトの設定について

前提・実現したいこと

box1をホバーした際、box2とbox3の両方にエフェクトをかけたいです。

現状

box1をホバーした際、「box2が大きくなりつつ透明になっていくという動作を繰り返す」というホバーエフェクトを実装しました。
次に、box1をホバーした際、box2に対するエフェクトはそのままに、box3の色を変化させようとして、下記のように実装したのですが、
box1をホバーしても、box3の色が変化しません。ちなみにbox3自体をホバーすると、ちゃんとbox3の色が変化します。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hover-efects</title>
    <style>

      .box1 {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #39f;
        position: absolute;
        left: 200px;
        top: 200px;
        z-index: 1;
      }

      .box2 {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #6cf;
        position: absolute;
        left: 200px;
        top: 200px;
      }

      .box1:hover + .box2 {
        animation: a 1.2s infinite;
      }

      @keyframes a {
        0% {
        }
        100% {
          background: #6cf;
          opacity: 0;
          height: 120px;
          width: 120px;
          left: 150px;
          top: 150px;
        }
      }

      .box3 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 500px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box3:hover {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }

      .box1:hover + .box3 {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }

    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3">box3</div>
  </body>
</html>

試したこと

.box1:hover + .box3{}という書き方自体が間違っているのかなと思い、
box4とbox5を定義して、下記のように実装したところ、box4をホバーするとちゃんとbox5の色が変化しましたので、
何か他の原因があるのかもしれないです。例えば1つのboxに対しては1つのエフェクトしか設定できないなどのルールがあるのでしょうか？

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hover-efects</title>
    <style>

      .box4 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 500px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box5 {
        background-color: #333;
        border: 2px solid #333;
        color: #fff;
        line-height: 50px;
        position: absolute;
        left: 200px;
        top: 200px;
        width: 100px;
        text-align: center;
      }
      .box4:hover + .box5 {
        background-color: #fff;
        border-color: #59b1eb;
        color: #59b1eb;
      }


    </style>
  </head>
  <body>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div>
  </body>
</html>

ぜひご回答をよろしくお願いします。