마우스 커서를 이미지로 변경하기

css에서 "cursor:pointer;"와 같이  cursor 속성을 통해

시스템 기본 커서  마우스의 모양을 지정할 수 있는데

이걸 직접 디자인한 이미지로 변경해줄 수 있음! ㅎㅎ

유령이닷! ㅋㅋㅋㅋㅋㅋㅋ

 

button:hover{
    cursor: pointer;
}

/* 커서 이미지로 변경하는 경우 기본 형식 */
button:hover{
    cursor: url(img-cur-hover.png), pointer;
}

/* 커서 이미지 위치를 변경해주는 경우(위치값은 생략 가능) */
button:hover{
    cursor: url(img-cur-hover.png) 10 15, pointer;
}

/* 여러 이미지 사용 가능 */
button:hover{
    cursor: url(img-cur-hover.png) 10 15, cursor: url(img-cur-hover2.png) 10 15, pointer;
}

/* :hover뿐만 아니라 :active 등에도 사용 가능  */
button:hover{
    cursor: url(img-cur-active.png) 10 15, pointer;
}

 

주의사항

• .png 파일 뿐만 아니라 커서의 확장자인 .cur 파일 사용 가능.
• 커서 이미지 좌표는 생략 가능.
• :hover뿐만 아니라 :focus, :active 등에서도 사용 가능.
• 커서 이미지가 너무 클 경우 적용이 되지 않을 수 있음. (128px 이하로 사용)

 

 

MDN

cursor - CSS: Cascading Style Sheets | MDN

 

 

 

.cur 파일 변환 사이트

PNG CUR 변환 (온라인 무료) — Convertio