마우스 커서 클릭 질문드립니다
본문
저만의 마우스 커서를 만들고 싶어서 css로 설정중인데요
const cursor = document.querySelector(".custom_cursor");
document.addEventListener("mousemove", (e) => {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + "px";
cursor.style.top = y + "px";
})
.custom_cursor{
z-index: 9999999;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
cursor: none;
pointer-events: unset;
border-radius: 50%;
background: red;
transform: translate(-50%, -50%);
}
이렇게 설정했는데 페이지에 잘 나오기는 합니다만 클릭이 막혀서 작동하지 않습니다 ㅠㅠ
z-index를 -1로 하면 다른 z-index 9999 설정한것들 때문에 가려지게 됩니다 ㅠㅠ
무엇이 문제인지 도움 부탁드립니다
답변 2
pointer-events: unset 을 none으로 변경하시면 클릭될 듯 합니다.
생성하신 customer_cursor 라는 동그라미가 클릭 포인트를 가려서 클릭이 안되나봐요 ㅠ
CSS로도 커서이미지를 변경할수는 있는데, 그런걸 원하시는건 아니겠죠...
