html – ：hover命令不适用于一般的兄弟选择器

我正在尝试在悬停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>

解决方法

首先,你的id名称不匹配,它区分大小写,你#inicio和#Inicio完全是两个不同的东西..

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

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

Demo

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

<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评论的那样,我还想放一个兼容性表,

Credits – 支持表