So wirken Sie sich auf andere Elemente aus, wenn Sie mit der Maus über ein Element fahren

Question

Was ich tun möchte, ist, wenn ein div bewegt wird, wirkt sich dies auf die Eigenschaften eines anderen div aus.

Wenn Sie beispielsweise in dieser JSFiddle-Demo mit der Maus über #cube fahren, ändert sich die Hintergrundfarbe über #container, #cube

div {
  Umriss: 1 Pixel durchgehend rot;
}

#container {
  Breite: 200px;
  Höhe: 30px;
}

#Würfel {
  Breite: 30px;
  Höhe: 100 %;
  Hintergrundfarbe: rot;
}

#cube:hover {
  Breite: 30px;
  Höhe: 100 %;
  Hintergrundfarbe: blau;
}

<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; }