태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

2007.09.19 11:55
Cursors: the 'cursor' property
'cursor'
Value:   [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Initial:   auto
Applies to:   all elements
Inherited:   yes
Percentages:      N/A
Media:   visual, interactive

This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

auto
The UA determines the cursor to display based on the current context.
crosshair
A simple crosshair (e.g., short line segments resembling a "+" sign).
default
The platform-dependent default cursor. Often rendered as an arrow.
pointer
The cursor is a pointer that indicates a link.
move
Indicates something is to be moved.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.
text
Indicates text that may be selected. Often rendered as an I-bar.
wait
Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.
help
Help is available for the object under the cursor. Often rendered as a question mark or a balloon.
<uri>
The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.

Example(s):

P { cursor : url("mything.cur"), url("second.csr"), text; } 

 

 

 

============================================================================

주의사항 :

- 흔히 쓰는 cursor:hand 는 비표준임. FF에서 제대로 지원되지 않음. hand대신 pointer를 사용하여야 한다. 단, IE 5.0 이하에서는 pointer 속성을 인식 못한다..  cursor:hand pointer 두개를 모두 정의하여 사용하면 되지만, FF 자바스크립트 콘솔에서 워닝메시지를 뿌린다.

적당히 선택하여 사용하도록 한다.



<span style="cursor:auto">style="cursor:auto"</span><br>
<span style="cursor:default">style="cursor:default"</span><br>
<span style="cursor:text">style="cursor:text"</span><br>

<span style="cursor:hand">style="cursor:hand"</span><br>
<span style="cursor:wait">style="cursor:wait"</span><br>
<span style="cursor:help">style="cursor:help"</span><br>
<span style="cursor:move">style="cursor:move"</span><br>
<span style="cursor:crosshair">style="cursor:crosshair"</span><br>
<span style="cursor:n-resize">style="cursor:n-resize"</span><br>
<span style="cursor:e-resize">style="cursor:e-resize"</span><br>
<span style="cursor:s-resize">style="cursor:s-resize"</span><br>
<span style="cursor:w-resize">style="cursor:w-resize"</span><br>
<span style="cursor:se-resize">style="cursor:se-resize"</span><br>
<span style="cursor:sw-resize">style="cursor:sw-resize"</span><br>
<span style="cursor:ne-resize">style="cursor:ne-resize"</span><br>
<span style="cursor:nw-resize">style="cursor:nw-resize"</span>


신고

'웹표준 > CSS' 카테고리의 다른 글

border-style  (0) 2007.09.20
text-overflow  (0) 2007.09.19
cursor 정리  (2) 2007.09.19
Display type 설정  (0) 2007.09.19
주요 스타일시트 속성  (0) 2007.09.19
리스트와 불릿 이미지 - ul, li  (0) 2007.09.18
Posted by 고시랑
TAG ,

티스토리 툴바