: hover command will not work with common selector

Question

I am trying to display a display that changes when the div class falls. The idea is for one div to disappear when another falls. I tried using common selector clips to change the mapping from row to row. CSS is as follows:

#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 ;}

And 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

First of all, your names iddo not match, case sensitive, #inicioand you #inicioare completely different things.

, , CSS, , sibling, DOM, , , ,

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

---

DOM, , #inicio , , , , , , id of #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 ​​ , ,

^-

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>

. Btw, span, , (: div).