커서 이동의 환영

Question

이미지를 커서 위치 (예 : 커서 이미지)에 표시 한 다음 원본 (cursor:none;)을 숨기고 이미지를 움직일 수 있습니까? 포인터가 스스로 움직이는 것처럼 보이게 한 다음 커서 이미지가 나타나는 위치에 커서를 표시합니다. 그런 다음 이미지를 사라지게하십시오. 커서를 나타나게하는 것에 대해 잘 모르겠습니다.

보안상의 이유로 커서를 자바 스크립트로 움직일 수 없다는 것을 읽었으므로, 제 생각에는 그것을 환상적으로 만드는 것을 생각하고있었습니다. 예 또는 아니오로 충분합니다! (그래서 내가 전진 할 수 있습니다) 이미지를 커서 위치에 표시하는 것에 대해별로 알지 못했습니다! : P

Answer 1

An yes or no will suffice!

예

좋아, 좀 더 깊이있는 조금 대답하자 ...

우리가 만드는 우리가 "사용자 정의"포인터를 원하는 사업부 (#bar) 에서 일하고있는 우리는 실제 포인터를 숨길 수 있습니다 : cursor을에

<div id="bar"> 
    <div id="pointer"></div> 
</div> 

세트 이미지를 이동 (뿐만 아니라 바닐라 JS를 사용하여 내가 jQuery를 경로를했다,하지만 완벽하게 가능)

body { 
    padding:50px; 
} 
#bar { 
    background-color: green; 
    width: 400px; 
    height: 400px; 
    cursor: none; 
} 
#pointer { 
    position: absolute; 
    width:32px; 
    height:32px; 
    background-image:url('//i.imgur.com/uKc3VMy.png'); 
} 

좀 자바 스크립트를 추가 :실제 포인터를 숨기고, 대신 역할을 #pointer에 이미지를 설정 주위 포인터 역할 :

$("#bar").mousemove(function (e) { 
    $('#pointer').offset({ 
     left: e.pageX, 
     top: e.pageY 
    }) 
}); 

샘플 : http://jsfiddle.net/e9BXg/1/