html - 悬停时使类元素变大

Question

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

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

我只是不确定我是否可以用一个类而不是一个 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>

希望对您有所帮助。请标记为答案!