html - :hover command won't work with a general sibling selector

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评论说，我也想放一个兼容性表，

^{Credits - 支撑表}