호버에서 클래스 요소를 더 크게 만듭니다.

Question

내 페이지의 "다음"및 "이전"기능에 대한 클래스를 설정 했으므로 커서를 더 크게 만들고 싶습니다 (다른 요소는 같은 위치에 시간). 매우 명확하지는 않습니다. 예를 들면 다음과 같습니다.

내 마우스가 NEXT 버튼을 마우스로 가리키고 있습니다.이 순간에이 버튼이 커지게하고 싶습니다. 그래서 그것은 더 많은 공간을 차지할 것이고 따라서 다른 요소들 (뒤로 가기)은 제쳐두고 움직이게됩니다.

나는 이드가 아닌 클래스와 함께 할 수 있을지 잘 모르겠다. {폭 : 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>

는 도움이되기를 바랍니다. 기쁘게한다면 답을 표시하십시오!