javascript - 如何防止侧边栏中的图标移动？

Question

我制作了一个图标边栏，它由不同的图标组成，这些图标在鼠标悬停时会变大。如果我将鼠标悬停在顶部图标上，我悬停的图标下方的所有其他图标都会向下移动。所以我的问题是如何防止图标移动。谢谢。

<div id="icon-bar" class="visible">
    <a href="#"><i class="fa fa-home"></i> 
    <span class="description">Home</span></a>
    <a href="#"><i class="fa fa-gamepad"></i>
    <span class="description">Games</span></a>
    <a href="#"><i class="fa fa-images"></i>
    <span class="description">Gallery</span></a>                            
</div>

<style>
#icon-bar {
width:100px;
height:100%;
background-color:blue;
position:absolute;
bottom:0px;
left:0px;
box-shadow:5px -10px 10px -2px #111;
}

#icon-bar a {
display:block;
text-align:center;
padding:20px;
color:white;
font-size:47px;
transition: all .2s ease-in-out;
}

#icon-bar a:hover {
background-color: #CF0B61;
transform: scale(1.2, 1.2);
}

.description{
display:none;
font-size:12px;
text-align:center;
}

#icon-bar a:hover .description {
display:block;
}

</style>

jsfiddle:https://jsfiddle.net/az0om9dr/

Answer 1

使用 absolute 定位图标，以便将它们从文档流中取出:

#icon-bar {
  width:100px;
  height:100%;
  background-color:blue;
  position:absolute;
  bottom:0px;
  left:0px;
  box-shadow:5px -10px 10px -2px #111;
}

#icon-bar a {
  position:absolute;
  display:block;
  text-align:center;
  padding:20px;
  color:white;
  font-size:47px;
  transition: all .2s ease-in-out;
}
  #icon-bar a:first-child {
    top:0;
  }
  #icon-bar a:nth-child(2) {
    top:94px;
  }
  #icon-bar a:nth-child(3) {
    top:188px;
  }

#icon-bar a:hover {
  background-color: #CF0B61;
  transform: scale(1.2, 1.2);
}

.description{
  display:none;
  font-size:12px;
  text-align:center;
}

#icon-bar a:hover .description {
  display:block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div id="icon-bar" class="visible">
  <a href="#"><i class="fa fa-home"></i><span class="description">Home</span></a>
  <a href="#"><i class="fa fa-gamepad"></i><span class="description">Games</span></a>
  <a href="#"><i class="fa fa-images"></i><span class="description">Gallery</span></a>							
</div>

Updated Fiddle