搜索

首页  >  问答  >  正文

当一个元素悬停时如何影响其他元素

<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粉769413355P粉769413355484 天前484

全部回复(2)我来回复

  • P粉953231781

    P粉9532317812023-08-28 10:42:01

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

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

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

    回复
    0
  • P粉633733146

    P粉6337331462023-08-28 00:09:44

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

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

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

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

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

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

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

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

    回复
    0
  • 取消回复