javascript - 覆盖两侧的图像

Question

我有这个菜单，它(当您将鼠标悬停在图标上时)使图标变大。我试图实现的是，让它在两种尺寸下都能正确显示，但这不太奏效。由于无序列表，它只能从左侧工作，但是有没有办法让它从两侧工作？ (基本上这样图标覆盖了右边的一个和左边的一个而不用推它)。我有这个: HTML:

    <!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
  <nav>
        <ul class="menu">
         <center>
         <a href="goolag_games.html"><img class="icon" src="games.png"></a>     
         <a href="index.html"><img class="icon" src="home.png"></a>      
         <a href="contact.html"><img class="icon" src="contact.png"></a>
         <a href="wai.html"><img class="icon" src="wai.png"></a>
         <a href="wita.html"><img class="icon" src="wita.png"></a>
         </center>
        </ul>
   </nav>
</div>
<a class="menu-close" onClick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>
<!-- END OF THE MENU!-->

CSS:

.icon{
    display: inline-block;
    margin-right: -5;
}
.icon:hover{
    width: 155px;
    margin: -15px -22px -15px -13px;
}
.menu{
    z-index: 10;
}

感谢大家的帮助。 如果有的话，都在这里上传(在右上角的菜单中): http://goolag.pw/delete2.html

Answer 1

将以下内容添加到您的 CSS:

.icon{
    position: relative;
    z-index: 10;
}
.icon:hover{
    z-index: 100;
}

通过增加 z-index，悬停图标在 DOM 层中向上移动，并显示在其他图标上方。