이 팁을 사용하여 웹 사이트에서 커서를 변경하십시오.
커서에 사용자 정의 이미지 추가
전체 페이지에 커서를 추가하거나 커서 속성을 설정하여 쉽게 특정 요소에 마우스를 올렸을 때 커서를 변경할 수 있습니다.
어디에서나 표시해야 하는 경우 커서를 body 태그로 설정합니다. 그렇지 않은 경우 class 또는 id와 같은 특정 선택기를 사용하여 해당 클래스 또는 id에만 커서를 추가할 수 있습니다.
전체 페이지에서 커서 변경
body{
cursor: url('covid.png'),auto;
}
특정 태그를 가리키면 커서 변경
p:hover{
cursor: url('covid.png'),auto;
}
CSS를 사용하여 사용자 정의 스타일 추가
멋진 CSS 항목을 커서에 추가해야 하는 경우 이를 수행하는 간단한 방법이 없습니다. 해야 할 일은 커서를 숨기고 작은 div를 추가하고 해당 div를 커서로 만드는 것입니다.
먼저 div를 추가하고 id 속성을 커서로 설정합니다. 설정한 후 해당 div에 스타일을 추가할 수 있습니다. 이를 위해 약간의 색상으로 둥근 모양 스타일을 추가하고 가운데를 투명하게 만듭니다. 이제 페이지를 다시 로드하면 스타일을 지정한 작은 div를 볼 수 있습니다.
다음으로 해야 할 일은 마우스 커서를 움직일 때 이 div를 이동하는 것입니다. 이를 위해서는 마우스 움직임을 캡처해야 합니다. 캡처 부분에는 Javascript가 필요합니다.
Javascript로 추가해 봅시다. 먼저 마우스 이동 리스너를 등록해야 합니다. 이 리스너는 마우스를 여기 저기 움직일 때마다 트리거됩니다. 이동 이동이 발생하면 X, Y 좌표로 이동의 현재 위치에 접근할 수 있습니다. 우리가 해야 할 일은 해당 위치 값을 가져오고 이를 기반으로 div X 및 Y 위치를 설정하는 것입니다. 이제 div가 제대로 이동하는 것을 볼 수 있습니다.
#cursor{
width: 30px;
height: 30px;
background-color:rgba(250, 128, 114, 0.774);
position: absolute;
border-radius: 50%;
border: 2px solid #fa8072;
transform: translate(-50%,-50%);
}
<body>
<div id="cursor" ></div>
</body>
window.addEventListener("mousemove",function(e){
document.getElementById("cursor").style.left = e.pageX;
document.getElementById("cursor").style.top = e.pageY;
})
사용자 지정 커서에서 클릭이 발생하지 않는 문제 수정
이 사용자 지정 커서를 사용하여 링크를 클릭하려고 하면 예상대로 작동하지 않을 수 있습니다. 그러나 이에 대한 빠르고 쉬운 해결책이 있습니다. 커서의 포인터 이벤트 속성을 없음으로 설정하기만 하면 됩니다. 이제 모든 것이 예상대로 작동하는 것을 볼 수 있습니다.
#cursor{
width: 30px;
height: 30px;
background-color:rgba(250, 128, 114, 0.774);
position: absolute;
border-radius: 50%;
border: 2px solid #fa8072;
transform: translate(-50%,-50%);
pointer-events: none;
}
이 튜토리얼이 마음에 드셨다면 저에게 coffee을 구매하여 저를 지원할 수 있습니다.
Reference
이 문제에 관하여(이 팁을 사용하여 웹 사이트에서 커서를 변경하십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abhirajb/change-the-cursor-on-a-website-with-these-tips-2adc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
