Question

我为＆＃34; next＆＃34;设置了课程。和＆＃34;之前＆＃34;我的页面上的函数以及我想要做的是在悬停时使其更大（并且其他元素将同时移到一边）。那不太清楚..例如：

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

我只是不确定我是否可以用课而不是身份证来做？我试过把.next：hover {width：120％}但它没有做任何事情

这是我的代码

＆＃13;

#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};
}

＆＃13;

<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>

＆＃13;

（在实际网站上，按钮周围有方框）

谢谢

Answer 1

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

＆＃13;

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

＆＃13;

#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
  }
  ;
}

＆＃13;

<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>

＆＃13;

希望它有所帮助。如果满意，请标记为答案！

悬停时使类元素更大

1 个答案: