获取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);
}