Question

我正在尝试在悬停div类时更改显示。这个想法是让一个div在盘旋另一个时消失。我尝试使用通用兄弟选择器使显示从内联更改为无。 CSS如下：

#Inicio {width: 100%;
    height: 100%;
    background-color: yellow;
    position: absolute;
    display: inline;
    }

.buttons:hover ~ #Inicio {display: none;}

.buttons {width: 80%;
        margin-left: auto;
        margin-right: auto;
        position: static;
        margin-left: 10%;
        font-size: 22px;
        border-top: 1px solid white;
        padding-top: 20px;
        padding-bottom: 20px; }

.buttons:hover {font-size: 24px;
            transition: all .5s ;}

HTML：

<div id="wrapper">

    <div id="menubar">
    <div id="menu">
        <h1>Menu</h1>
    </div>
    <div class="buttons">
        Inicio
    </div>
    <div class="buttons">
        Productos
    </div>
    <div class="buttons">
        Localizacion
    </div>
    <div class="buttons">
        El equipo
    </div>
    <div class="buttons">
        Ideas
    </div>
    <div class="buttons">
        La pagina
    </div>
</div>

    <div id="content">
    <div id="inicio"></div>
</div>

</div>

Answer 1

首先，您的id名称不匹配，区分大小写，#inicio和#Inicio完全是两个不同的内容。

和I commented一样，问题是你不能使用CSS弹出元素意味着你不能选择父元素而不是继续选择父节点兄弟元素，所以你需要改变你的DOM，你试图选择一个与按钮父元素相邻的元素而不是按钮本身，所以你能做的最好就是这个

.buttons:hover ~ #content > #inicio {
    display: none;
}

Demo

更改DOM，你需要将元素放在同一级别上，如果#inicio是嵌套的，那很好，但要选择它的父级，将元素彼此相邻放在同一级别上，这样所有的都是将孩子指向id #wrapper

的元素

<div id="wrapper">
    <div id="menu">
        <h1>Menu</h1>
    </div>
    <div class="buttons">
        Inicio
    </div>
    <div class="buttons">
        Productos
    </div>
    <div id="content">
        <div id="inicio">Disappear this</div>
    </div>
</div>

正如@enguerranws评论的那样，我还想提出兼容性表格，

enter image description here

^{Credits - 支持表}

Answer 2

也许是因为它是#inicio，而不是#Inicio？

然后你需要改变你的DOM。你必须把#inicio放在.buttons div中。或者：

.buttons:hover ~ #Inicio

不行。

<div id="wrapper">

<div id="menubar">
<div id="menu">
    <h1>Menu</h1>
</div>
<div class="buttons">
    <span>Inicio</span>
    <div id="inicio"></div>

</div>

</div>

<div id="content">

</div>

</div>

您应该使用该结构。顺便说一句，我添加了一个span来包装你的文本，因为将文本直接放在块元素（这里：div）中是无效的。

：hover命令不适用于常规兄弟选择器

2 个答案: