CSS 사용자 정의 커서 이미지 - 오버플로 숨김

Question

부트 스트랩 앵커 버튼 안에 스팬과 함께 사용중인 사용자 정의 커서 이미지가 있습니다. 커서가 버튼 가장자리에 가까울 때 첨부 된 그림처럼 이미지가 잘리는 경우 오버플로가 작동하지 않도록하려고합니다. 나는 여기서 일하고있는 codepen을 가지고있다. 아무도 이것으로 도울 수 있습니까?

HTML :

는

<a href="#" class="btn btn-primary btn-spotlight" id="happyButton"> 
     <span class="spotlight">EXPLORE</span> 
    </a> 

SCSS :

#happyButton { 
     margin-top: 20px; 
     padding-left: 0; 
     padding-right: 0; 
     color: white; 
     &:hover { 
     overflow: hidden; 
     white-space: nowrap; 
     } 
     & .spotlight { 
     cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png") 5 12, auto; 
     padding: 15px 30px; 
     } 
    } 

Answer 1

커서가 따라서 페이지의 요소가 아니며, 그와 같은 조작 할 수 없습니다.

나는 이것을 수행 할 수있는 방법이입니다.