当一个元素悬停时如何影响其他元素
P粉769413355
P粉769413355 2023-08-27 12:48:40
0
2
457
<p>我想要做的是,当某个 <code>div</code> 悬停时,它会影响另一个 <code>div</code> 的属性。</p> <p>例如,在这个 JSFiddle 演示中,当您将鼠标悬停在 <code>#cube</code> 上时,它会更改 <code>background-color</code> 但我想要的是,当我将鼠标悬停在 <code>#container</code> 上时,<code>#cube</code> 会受到影响。<!-- p--> </p><p><br /></p> <pre class="brush:css;toolbar:false;">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; }</pre> <pre class="brush:html;toolbar:false;"><div id="container"> <div id="cube"> </div> </div></pre> <p><br /></p>
P粉769413355
P粉769413355

全部回复(2)
P粉953231781

在此特定示例中,您可以使用:

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

此示例仅适用于 cubecontainer 的子级。对于更复杂的场景,您需要使用不同的 CSS,或使用 JavaScript。

P粉633733146

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

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

如果立方体位于容器旁边(在容器关闭标记之后):

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

如果立方体位于容器内的某个位置:

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

如果立方体是容器的同级:

#container:hover ~ #cube { background-color: yellow; }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板