답변:
CSS로 :
selector { cursor: none; }예를 들면 :
<div class="nocursor">
Some stuff
</div>
<style type="text/css">
.nocursor { cursor:none; }
</style>Javascript의 요소에서이를 설정하려면 다음 style특성을 사용할 수 있습니다 .
<div id="nocursor"><!-- some stuff --></div>
<script type="text/javascript">
document.getElementById('nocursor').style.cursor = 'none';
</script>
몸 전체에 이것을 설정하려면 :
<script type="text/javascript">
document.body.style.cursor = 'none';
</script>
그래도 커서를 숨기고 싶은지 확인하십시오. 정말 사람들을 귀찮게 할 수 있습니다 .
1x1px 투명 png 또는 1 % 투명도 png를 사용하십시오.
document.body.style.cursor = 'auto'.
그동안 cursor: noneCSS의 솔루션은 견고하고 쉽게 확실히 해결 방법은 실제 목표하는 경우, 제거 웹 응용 프로그램을 사용하는 동안 기본 커서를하거나 구현 고유의 원시 마우스 움직임의 해석 (예를 들어 FPS 게임을위한), 당신은 수도 대신 Pointer Lock API 사용을 고려하고 싶습니다 .
요소에서 requestPointerLock 을 사용 하여 커서를 제거하고 모든 mousemove이벤트를 해당 요소로 리디렉션 할 수 있습니다 (처리하거나 처리하지 않을 수 있음).
document.body.requestPointerLock();잠금을 해제하려면 exitPointerLock 을 사용할 수 있습니다 .
document.exitPointerLock();커서가 없습니다.
이것은 매우 강력한 API 호출입니다. 커서를 보이지 않게 할 뿐만 아니라 실제로 운영 체제의 기본 커서를 제거합니다 . 포인터 잠금이 해제 될 때까지 ( 일부 브라우저에서 사용 하거나 눌러 ) 텍스트를 선택하거나 마우스로 어떤 작업 도 수행 할 수 없습니다 (코드에서 일부 마우스 이벤트 수신 제외 ).exitPointerLockESC
즉, 커서가 없으므로 커서가있는 창을 다시 표시 할 수 없습니다.
제한 사항
위에서 언급했듯이 이것은 매우 강력한 API 호출이므로 클릭과 같은 웹에서의 직접적인 사용자 상호 작용에 대한 응답으로 만 허용됩니다. 예를 들면 다음과 같습니다.
document.addEventListener("click", function () {
document.body.requestPointerLock();
});
또한 권한이 설정되어 있지 않으면 requestPointerLock샌드 박스에서 작동하지 않습니다 .iframeallow-pointer-lock
사용자 알림
일부 브라우저는 잠금이 설정되기 전에 사용자에게 확인 메시지를 표시하고 일부는 단순히 메시지를 표시합니다. 이것은 호출 직후 포인터 잠금이 활성화되지 않을 수 있음을 의미합니다. 그러나 호출 된 pointerchange요소에서 이벤트를 수신하면 포인터 잠금의 실제 활성화를들을 수 있습니다 requestPointerLock.
document.body.addEventListener("pointerlockchange", function () {
if (document.pointerLockElement === document.body) {
// Pointer is now locked to <body>.
}
});
대부분의 브라우저는 메시지를 한 번만 표시하지만 Firefox는 매번 호출 할 때마다 메시지를 스팸으로 표시합니다. AFAIK는 사용자 설정으로 만 해결할 수 있습니다 . Firefox에서 포인터 잠금 알림 비활성화를 참조하십시오 .
생 마우스 움직임 듣기
Pointer Lock API는 마우스를 제거 할뿐만 아니라 생 마우스 이동 데이터를 requestPointerLock호출 된 요소 로 리디렉션 합니다. mousemove이벤트 를 사용한 다음 이벤트 객체 의 movementXand movementY속성에 액세스 하여 간단히들을 수 있습니다 .
document.body.addEventListener("mousemove", function (e) {
console.log("Moved by " + e.movementX + ", " + e.movementY);
});
나는 투명 * .cur로 1px에서 1px로했지만 작은 점처럼 보입니다. :( 나는 그것이 할 수있는 가장 좋은 브라우저 간 일이라고 생각합니다. CSS2.1은 'cursor'속성에 대해 'none'을 갖지 않습니다-CSS3에 추가되었으므로 어디에서나 작동 할 수 없습니다.
전체 웹 페이지에서 커서를 숨기려면 표시되는 전체 페이지를 가리지 body않는 한 사용 하지 않습니다. 항상 그렇지는 않습니다. 커서가 페이지의 모든 곳에 숨겨져 있는지 확인하려면 다음을 사용하십시오.
document.documentElement.style.cursor = 'none';다시 사용하려면 다음을 수행하십시오.
document.documentElement.style.cursor = 'auto';정적 CSS 표기법과 아날로그가에 의해이 질문에 대해 답이다 파벨 Salaquarda (본질적으로 : html * {cursor:none})