將鼠標懸停在嵌入的div上並更改另一個

Question

這是我的HTML：

    <div id="menu">
        <div class="arrows">
            <div class="arrow-down"></div>
        </div>
        <div class="buttons">
            <button class="home">Home</button>
            <button class="about">About</button>
        </div>
    </div>
    <div class="titleHome">
        <p1>Home</p1>
        <div id="bubble"></div>
        <div id="tri"></div>
    </div>

請注意.home嵌入在2個div中; .menu然后.buttons 。 .titleHome的顯示為none 。 我想在使用純css將.titleHome懸停在.home時將顯示更改為block .titleHome 。 問題是我不知道這樣做的規則。

我知道如果#b在HTML中的#a之后，那么我們可以使用+ 。

我也知道如果中間有元素我們可以用~ 。

但這些規則是否適用於.home因為它嵌入在其他div中。 我試過用~但沒有成功。

有人可以給我一個如何做到這一點的樣本嗎？

Answer 1

目前，CSS中只有3個連接選擇器： +用於下一個兄弟姐妹， ~用於任何下一個兄弟姐妹， >用於孩子。 您無法使用純CSS訪問父元素。 因此，你無法升級到下一個元素。

您可以使用JavaScript來實現您的要求，而無需更改HTML。 您還可以調整HTML並使用元素，該元素需要在與hovered元素相同的級別上（和之后）具有其他樣式。

Answer 2

對於信息 ，但在這里根本沒用，指針 - 鄰居上的無事件和子節點上的自動事件可以在這里做到這一點：

 #menu { pointer-events: none; padding: 1em; } .buttons button.home { pointer-events: auto; cursor: pointer; margin: 1em; } .titleHome { display: none; } #menu:hover + .titleHome { display: block; } 

 <div id="menu"> <div class="arrows"> <div class="arrow-down"></div> </div> <div class="buttons"> <button class="home">Home</button> <button class="about">About</button> </div> </div> <div class="titleHome"> <p1>Home</p1> <div id="bubble"></div> <div id="tri"></div> </div> 

對於單一的交互和基本樣式，它可以小心使用。

對於演示或快速測試（在編寫腳本之前）它也可以幫助...只是不要忘記刪除或評論規則。