Как использовать зависание на div, который находится ниже другого div

Question

Я пытаюсь создать меню на боковой стороне моего веб-сайта, которое выкатывается при наведении на него. Сначала у меня была ширина, но текст выглядел бы странно, поэтому я решил использовать анимацию CSS для изменения положения div таким образом, чтобы он перемещался вправо. Проблема, которую я получаю, состоит в том, что те меню divs накладывают «главный» div. Единственный способ получить эти divs под основным div - использовать z-index: -1, но затем :hover больше не работает. Я пробовал pointer-events: none;, но это тоже не работает.

<div id="container"> 
    <div id="header"> 
     <img id="mainpic" src="pokebalicon.png" /> 
    </div> 
    <div class="sidediv" id="first"> 
     <p>Homepage</p> 
    </div> 
    <div id="mainpage"> 
     text 
    </div> 
</div> 

И CSS

#container { 
    width: 820px; 
    height: 700px; 
    margin: 100px auto; 
    position: relative; 
} 
#header { 
    padding: 10px; 
    height: 100px; 
    width: 100%; 
    background-color: transparent; 
    overflow: hidden; 
} 
#mainpage { 
    height: 600px; 
    width: 100%; 
    background-color: #FFFFFF; 
    border-radius: 10px; 
    padding: 20px; 
    border: 1px solid #D5D4D4; 
    pointer-events: none; 
} 
.sidediv{ 
    position: absolute; 
    left: 721px; 
    height: 40px; 
    width: 170px; 
    text-align: center; 
    margin-top: 50px; 
    border: 1px solid #000000; 
    border-radius: 0 5px 5px 0; 
    z-index: -1; 
} 

.sidediv:hover запускает анимацию, которая меняет left таким образом, что это похоже, что это время вытащил. Но, к сожалению, ничего не происходит, паря на стороне. Любая идея, как это решить?

зависания выглядит следующим образом:

.sidediv:hover{ 
    -webkit-animation: example 0.5s forwards; 
    animation: example 0.5s forwards; 
} 
@-webkit-keyframes example { 
    100% {left: 841px;} 
} 
@keyframes example { 
    100% {left: 841px;} 
} 

Answer 1

Попробуйте

#container { 
 
    width: 820px; 
 
    height: 700px; 
 
    margin: 100px auto; 
 
    position: relative; 
 
} 
 

 
#header { 
 
    padding: 10px; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
    overflow: hidden; 
 
} 
 

 
#mainpage { 
 
    height: 600px; 
 
    width: 100%; 
 
    background-color: #FFFFFF; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
    border: 1px solid #D5D4D4; 
 
} 
 

 
.sidediv { 
 
    position: absolute; 
 
    left: 721px; 
 
    top: 80px; 
 
    height: 40px; 
 
    width: 170px; 
 
    text-align: center; 
 
    margin-top: 50px; 
 
    border: 1px solid #000000; 
 
    border-radius: 0 5px 5px 0; 
 
    z-index: -1; 
 
    transition: 0.7s 
 
} 
 

 
#container #mainpage:hover + .sidediv { 
 
    z-index: 1; 
 
    background: pink; 
 
    left: 0px 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <img id="mainpic" src="http://i.imgur.com/IMiabf0.jpg" /> 
 
    </div> 
 
    <div id="mainpage"> 
 
    text 
 
    </div> 
 
    <div class="sidediv" id="first"> 
 
    <p>Homepage</p> 
 
    </div> 
 
    
 
</div>