搜尋

首頁  >  問答  >  主體

當一個元素懸停時如何影響其他元素

<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粉769413355541 天前530

全部回覆(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
  • 取消回覆