我想要做的是当某个 div
悬停时,它会影响另一个 div
的属性。
例如,在 this JSFiddle demo ,当您将鼠标悬停在 #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; }
如果立方体在容器旁边(在容器结束标记之后):
#container:hover + #cube { background-color: yellow; }
如果立方体在容器内的某处:
#container:hover #cube { background-color: yellow; }
如果立方体是容器的兄弟:
#container:hover ~ #cube { background-color: yellow; }
关于html - 悬停一个元素时如何影响其他元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4502633/