[解決済み] ある要素にカーソルを合わせたときに、他の要素に影響を与える方法

質問

ある特定の div がホバーされると、別の div .

例えば このJSFiddleのデモ にカーソルを合わせると #cube を変更します。 background-color の上にカーソルを置くと、そのカーソルの位置が変わるようにしたいのです。 #container , #cube が影響を受けます。

div {
  outline: 1px solid red;
}

#container {
  width: 200px;
  height: 30px;
}

#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}

#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">
  <div id="cube">
  </div>
</div>

解決方法は？

キューブがコンテナの中に直接入っている場合。

#container:hover > #cube { background-color: yellow; }

cubeがコンテナの隣（コンテナ閉じタグの後）にある場合。

#container:hover + #cube { background-color: yellow; }

キューブがコンテナ内のどこかにある場合。

#container:hover #cube { background-color: yellow; }

キューブがコンテナの兄弟である場合。

#container:hover ~ #cube { background-color: yellow; }