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

Question

I am trying to have a display that changes when hovering a div class. The idea is to have one div disappear when hovering another. I have tried using general sibling selectors to make the display change from inline to none. The 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 the 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 id names doesn't match, its case sensitive, you #inicio and #Inicio are completely two different things..

And as I commented, the issue is that you cannot pop out of the element using CSS means you cannot select the parent element and than go ahead and select the parents sibling element, so you need to change your DOM, you are trying to select an element which is adjacent to the buttons parent element and not the button itself, so the best you can do is this

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

Demo

---

Altered DOM, you need to bring the elements on the same level, if #inicio is nested, it's fine, but to select it's parent, bring the elements adjacent to each other on the same level so that all are direct child to an element having an 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>

---

As @enguerranws commented, I thought to put a compatibility table as well,

^{Credits - Support Table}