如何利用悬停在另一个div下方的div

Question

我尝试在我的网站侧面上制作一个菜单，该菜单在其上展开时展开。首先，我的宽度已经扩大了，但文字看起来很奇怪，所以我想我会用CSS动画来改变div的位置，使它移动到右侧。我得到的问题是那些菜单div覆盖了'main'div。在主分区下获得这些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时没有任何反应。任何想法如何解决这个问题？

悬停看起来是这样的：

.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>