이 글은 CSS Advent Calendar 2018 - Qiita 14일째 되는 글이다.

성과물

CodePen - Mouse Cursor Jamming
"CLICK ME!"버튼이 마우스에 가까울수록 커서가 커집니다.그거밖에 없어요.
물론 스마트폰에 커서가 표시되지 않아 지원되지 않습니다

어떻게 설치했어

브라우저에서 마우스 커서의 위치를 수정할 수 없습니다.
그걸 할 수 있었다면 안전성이 무서웠을 거야.
이번에 실시한 것은 단지 마우스 커서를 가지고 노는 척했을 뿐이다.
이것밖에 못했어↓

브라우저에서 마우스 커서 표시 제거

마우스 커서가 사라진 위치

를 가져옵니다.

커서 위치 근처에 준비된 커서 이미지 보이기

커서의 이미지 위치를 적절하게 이동

우선 브라우저에서 다음 코드로 마우스 커서를 삭제할 수 있습니다.그나저나 cursor: url(...) 단독 커서로 바꿀 수 있어요.

<div class="target">...<div>
<style>
.target {
  cursor: none
}
</style>

또한 브라우저에서 마우스 커서의 위치를 가져올 수 있습니다.

viewElement.addEventListener('mousemove', (mouse) => {
  console.log(mouse.pageX, mouse.pageY)
  ...
})

이렇게 하면 마음대로 할 수 있다.

전체 코드

See the Pen Mouse Cursor Jamming by 카페🔰( @redshoga ) ( @redshoga ) on CodePen .

잡담

이걸 왜 했냐면 예전에 어떤 수상한 사이트에서 당했기 때문이야p>

당시 "마우스가 납치되었습니다!"그러고 보니 마우스 커서를 숨긴 상태로 두었네↑ 이렇게 하면 돼!나는 단번에 알아차렸다p>

소양이 없는 사람이 사이트에 들어왔을 뿐이다. "나는 바이러스에 감염됐어! 봐, 마우스 커서가 뺏겼지?"만약 이렇게 말한다면, 나는 강제로 장난을 칠지 모르겠다.따라서 cursor 나는 속성에서 커서가 놀리는 것은 일종의 취약성이라고 생각한다p>

도 이런 일이 있다cursor. 속성을 없애는 게 좋을 것 같아.(또는 none 또는 URL을 설정할 수 없음)

종료엉덩이