버튼이 중심에서 움직이지 않음

jquery를 사용하여 앵커 포인트가 중심에서 오는 것처럼 애니메이션 대신에 약간의 패딩을 움직일 때 왼쪽 상단에서 움직입니다. 모든 코드와 JSFiddle 링크가 아래에 있습니다.버튼이 중심에서 움직이지 않음

HTML :

<div id="gaming-news-info"> 
    <a id="news-button" style="cursor:pointer;">Go to News section</a> 
</div>

CSS :

#gaming-news-info { 
    position: absolute; 
    z-index: 999; 
    width: 400px; 
    height: 200px; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    margin-top: -100px; 
} 

#news-button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
    position: absolute; 
    margin-top: 130px; 
    font-family: "Prompt-SemiBold"; 
    margin-left: 90px; 
}

출처

2016-09-13 Matt.Owen

내가 모든 자바 스크립트/jQuery를 사용하지 않는 게 좋을 .... 스크립트 라이브러리의 오버 헤드없이 같은 일을 완벽하게 할 수있다 ... HTTPS : //jsfiddle.net/NotInUse/ky3fjfer/1/ – Scott

그게 효과가 있다고 대답 할 수있는 답변을 넣어주었습니다. D –

당신은 간단한 호버 효과를 JQuery와/자바 스크립트가 필요하지 않습니다. CSS3 전환 및 변환이

#gaming-news-info { 
 
    position: absolute; 
 
    z-index: 999; 
 
    width: 400px; 
 
    height: 200px; 
 
    top: 50%; 
 
    left: 50%; 
 
\t transform: translateX(-50%) translateY(-50%); 
 
\t margin-top: -100px; 
 
} 
 

 
#news-button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    margin-top: 130px; 
 
    font-family: "Prompt-SemiBold"; 
 
\t margin-left: 90px; 
 
\t transform: scale(1); 
 
\t transition: all .2s; 
 
} 
 

 
#news-button:hover { 
 
\t transform: scale(1.05); 
 
\t transition: all .2s; 
 
}

<div id="gaming-news-info"> 
 
    <a id="news-button" style="cursor:pointer;">Go to News section</a> 
 
</div>

출처

2016-09-13 00:56:50 Scott

버튼이 중심에서 움직이지 않음

답변

관련 문제