将鼠标悬停在嵌入的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> 

对于单一的交互和基本样式，它可以小心使用。

对于演示或快速测试（在编写脚本之前）它也可以帮助...只是不要忘记删除或评论规则。