css, 마우스 over 시 포인터 모양 지정하기

버튼 효과를 내기 위해 mouse over 시 포인터 모양을 손가락으로 만드는 경우가 많이 있죠.

이럴 땐 style에 한 줄만 추가해주면 쉽게 만들 수 있습니다.

예시)  마우스 포인터 손가락 모양으로 만들기

<div id="test" style="cursor:pointer;"> 클릭하세요 </div>

포인터는 손가락이나 화살표 말고도 많은 종유가 있습니다.

아래는 "stackoverflow" 에서 긁어온 포인터 관련 옵션 목록입니다.

위에 예시와 동일하게 style 내부에 선언해주면 위 이미지 처럼 사용할 수 있습니다.

cursor: auto; 

cursor: default; 

cursor: none; 

cursor: context-menu; 

cursor: help; 

cursor: pointer; 

cursor: progress;

cursor: wait; 

cursor: cell; 

cursor: crosshair; 

cursor: text; 

cursor: vertical-text; 

cursor: alias; 

cursor: copy; 

cursor: move; 

cursor: no-drop; 

cursor: not-allowed; 

cursor: all-scroll; 

cursor: col-resize; 

cursor: row-resize; 

cursor: n-resize; 

cursor: e-resize; 

cursor: s-resize; 

cursor: w-resize; 

cursor: ns-resize; 

cursor: ew-resize; 

cursor: ne-resize; 

cursor: nw-resize; 

cursor: se-resize; 

cursor: sw-resize; 

cursor: nesw-resize; 

cursor: nwse-resize;

마우스 포인터를 이미지로 대체하고 싶은 경우는 다음과 같이 하시면 됩니다.

cursor: url(images/cursor.png), auto;

Stack overflow 참고