我制作了一个图标边栏,它由不同的图标组成,这些图标在鼠标悬停时会变大。如果我将鼠标悬停在顶部图标上,我悬停的图标下方的所有其他图标都会向下移动。所以我的问题是如何防止图标移动。谢谢。
<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/
最佳答案
使用 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
关于javascript - 如何防止侧边栏中的图标移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52745948/