.cur(Internet Explorer의 경우), .gif 및 .png(Chrome, Firefox, Safari의 경우)와 같은 확장자를 사용하여 사용자 지정 커서 이미지를 만들고 CSS cursor 속성을 사용하여 요소에 적용하고 URL로 설정하고 auto, default, pointer 등과 같은 일반 커서 값을 추가하십시오.
해결책
Selector { cursor: url("/*path to custom cursor file*/"), generic cursor; }
예시
예를 들어 맞춤 커서를 만드는 방법을 살펴보겠습니다. -
<!DOCTYPE html> <html> <head> <title>Custom Cursor Using CSS</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #tech1 { cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto; } #tech2 { cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto; } </style> </head> <body> <form> <fieldset> <legend>Custom Cursor Using CSS</legend> <h1>Learn</h1> <input type="button" id="tech1" value="DBMS"> <input type="button" id="tech2" value="Python"> </fieldset> </form> </body></html>
출력
다음은 위의 코드에 대한 출력입니다 -
'DBMS' 위로 마우스를 가져갑니다. 버튼 -
'Python' 위로 마우스를 가져갑니다. 버튼 -