我想要做的是当某一个div悬停时,它会影响另一个的属性div。
div
例如,在这个 JSFiddle 演示中,当您将鼠标悬停在#cube它上面时会改变,background- color但我想要的是当我将鼠标悬停在 上时#container,#cube会受到影响。
#cube
background- color
#container
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; }