當一個元素懸停時如何影響其他元素

Question

我想要做的是，當某個 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>

Answer 1

在此特定範例中，您可以使用：

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

此範例僅適用於 cube 是 container 的子層級。對於更複雜的場景，您需要使用不同的 CSS，或使用 JavaScript。

Answer 2

如果立方體直接位於容器內：

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

如果立方體位於容器旁邊（在容器關閉標記之後）：

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

如果立方體位於容器內的某個位置：

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

如果立方體是容器的同級：

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