html 悬停 div,关于html：如何在div悬停时影响其他元素

我认为这是一个非常基本的问题，但我不确定如何做到这一点。

我想要做的是当某个div悬停时，它会影响另一个div的属性。

例如，在这个简单的示例中，当您将鼠标悬停在#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;

}

如果立方体直接位于容器内：

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

不要忘记一般的兄弟组合器~'多维数据集是在DOM之后的容器之后的某个地方并且共享一个父级'

那很酷。是否有一些来源我可以找到更多相关信息？它是否受所有浏览器的支持，是CSS3吗？如果想了解更多信息，那将会非常棒。非常感谢！

有关CSS选择器的更多信息：w3schools.com/cssref/css_selectors.asp

+1很棒的答案@Mike。如果#container在#cube旁边，即#container跟随#cube，该怎么办？

如果悬停元素在容器内部(我们想要受影响)该怎么办？例如：#cube：hover #container {Some CSS Effects}

@Hanzllah目前无法使用CSS，你需要使用JavaScript来改变父元素(#container)

如何将悬停效果应用于与另一个元素相邻的元素，例如，是否可以在表格中使用鼠标悬停在一个td上来更改同一行中另一个td的背景颜色？

如何处理鼠标离开？当你把鼠标从元素