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图层中向上移动，并显示在其他图标上方。

Answer 2

您需要使用z-index，但为了做到这一点，您需要添加一个定位元素。我试过这个并且工作了：

.menu a:hover{
  z-index: 150;
  position: relative;
}

Answer 3

您可能想要设置所有图片＆＃39; z-index属性为负值，当图像悬停时，将其设置为正值。我不知道这是否是一个错误但是它的行为方式，请看this fiddle：

#one {
    width: 100px;
    height: 40px;
    background: red;
    z-index: 10;
}

#two {
    width: 100px;
    height: 40px;
    background: blue;
    position: relative;
    top: -20px;
    left: 20px;
    z-index: -1;
}

如果您将第一个元素z-index设置为>0值，则它不会显示在第二个元素上，直到z-index为<0为止设置为{{1}}。

覆盖双方的图像

3 个答案: