javascript - 获取 Font Awesome 容器以在悬停时变大(javascript)

Question

我有一堆按钮的这些 FA 图标。我希望它们在悬停时一次变大。其他人因此会稍微移到一边。我想到了 javascript 来做到这一点并尝试了这个但是它没有用:

function hoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=10%', width: '+=10%'});
}

function nothoverIcons(classnm) {
  document.getElementById(classnm).css({height: '+=10%', width: '+=10%'});
}

#mainicons{
position:fixed;
bottom:20px;
right:193px;
text-align:center;  
}
 
#mainicons i{
display:inline-block;
margin-top:0;
margin-left:-3px;
height:30px;
width:50px;
padding:10px;
color:{color:Main icon};
background:{color:Main icon background};
text-transform:uppercase;
font-size:15px;
line-height:30px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s  ease;
-o-transition: all .7s  ease;
transition: all .7s  ease;
}  
 
#mainicons i:hover{
color:{color:Hover};
background:{color:Main icon};
-webkit-transition: all .7s ease;
-moz-transition: all .7s  ease;
-o-transition: all .7s  ease;
transition: all .7s  ease;
}

<div id="mainicons" onmouseover="hoverIcons('mainicons')" onmouseout="nothoverIcons('mainicons')">
<a href="/" title="Home"><i class="fa fa-home"></i></a>
<a href="/ask" title="Ask"><i class="fa fa-envelope"></i></a>
<a href="/submit" title="Request"><i class="fa fa-pencil "></i></a>
<a href="/archive" title="Archive"><i class="fa fa-clock-o"></i></a>
</div>

感谢您花时间回复!

Answer 1

尝试变换高度和宽度:

#mainicons i:hover {
  color:{color:Hover};
  background:{color:Main icon};
  transform: scale(1.1);
}