ホバリング時にクラス要素を大きくする

Question

私のページの "次"と "前の"関数のクラスを設定しました。私がしたいのは、もっと大きくしたいのと同じものです時間）。これはあまり明確ではありません。例：

私のマウスはNEXTボタン上にありますが、この時点で私はこのボタンを大きくしたいと思います。つまり、それはより多くのスペースを必要とすることを意味し、それゆえ、他の要素（背中と上）は別に移動します。

私はクラスではなく、IDでそれを行うことができますか分かりませんか？ （実際のウェブサイトでのボックスがあります。ここに私のコードは

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

だが、それは何も

をしませんでした：ホバー{120％幅：}私は.next入れて試してみましたボタンの周り）

ありがとうございます

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>

それがお役に立てば幸いです。もしそれが喜ばれたら、答えとしてマークしてください！