悬停一个元素时如何影响其他元素

问题描述

如果立方体直接在容器内：

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

如果立方体在容器旁边（在容器结束标记之后）：

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

如果立方体在容器内的某个地方：

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

如果立方体是容器的兄弟：

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

解决方法

我想要做的是当某一个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>