悬停时使类元素变大

Question

我已经在我的页面上为"下一个"和"上一个"函数设置了一个类，我想做的是在悬停时让它变大(其他元素会同时移到一边)。这不是很清楚。.所以例如：

我的鼠标悬停在下一个按钮上，此时我希望这个按钮变大。所以这意味着它会占用更多的空间，因此其他元素(背面和顶部)移到一边。

我只是不确定我是否可以用类而不是 id 来做到这一点？我试过放.next：hover{width：120%}，但它什么也没做

这是我的代码

#pager{
width:100%;
height:50px;
margin-top:20px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
}

#pagination{
margin:auto;
width:572px;
height:30px;
text-align:center;
}

.pagicon, .next{
display:inline;
}

.pagicon a, .next{
font-size:11px;
padding:5px;
margin:5px;
color:{color:Pagination};
background:{color:Pagination background};
border-radius:{text:Border radius};
}

.pagicon a:hover, .next:hover{
cursor:pointer;
color:{color:Bold};
background:{color:Hover};  
}

.pagicon i, .next i{
color:{color:Icon};
font-size:15px;
margin:5px;
text-decoration:none;
}

.pagicon:hover i, .next:hover i{
color:{color:Bold};
}

<div id="pager">

<div id="pagination">
<span class="pagicon">
<a href="{PreviousPage}"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> BACK </a>
</span>

<span class="pagicon">
<a href="#"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> TOP </a>
</span>

<a class="next" href="{NextPage}"> NEXT <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>

</div>

(在实际网站中，按钮周围有框)

谢谢

Answer 1

我已经用JS完成了。看看下面。我用过onmouseover和onmouseout.您可以在悬停时更改字体大小。它目前是70px。

function hoverFn(classnm) {
document.getElementById(classnm).style.fontSize = "70px";
}
function nothoverFn(classnm) {
document.getElementById(classnm).style.fontSize = "1em";
}

#pager {
width: 100%;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
#pagination {
margin: auto;
width: 572px;
height: 30px;
text-align: center;
}
.pagicon,
.next {
display: inline;
}
.pagicon a,
.next {
font-size: 11px;
padding: 5px;
margin: 5px;
color: {
color: Pagination
}
;
background: {
color: Pagination background
}
;
border-radius: {
text: Border radius
}
;
}
.pagicon a:hover,
.next:hover {
cursor: pointer;
color: {
color: Bold
}
;
background: {
color: Hover
}
;
}
.pagicon i,
.next i {
color: {
color: Icon
}
;
font-size:15px;
margin:5px;
text-decoration:none;
}
.pagicon:hover i,
.next:hover i {
color: {
color: Bold
}
;
}

<div id="pager">
<div id="pagination">
<span class="pagicon">
<a href="{PreviousPage}"  id= "back" onmouseover="hoverFn('back')" onmouseout="nothoverFn('back')"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> BACK </a>
</span>
<span class="pagicon">
<a href="#" id="top" onmouseover="hoverFn('top')" onmouseout="nothoverFn('top')"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> TOP </a>
</span>
<a class="next" id="next" href="{NextPage}" onmouseover="hoverFn('next')" onmouseout="nothoverFn('next')"> NEXT <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</div>
</div>

希望对您有所帮助。如果愿意，请标记为答案！