CSS의 커서 속성은 무엇입니까? 커서 속성 사용

이 글의 내용은 CSS의 커서 속성이 무엇인지 소개하는 것입니다. 커서 속성을 사용합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

우선 커서 속성이 무엇인지 알아볼까요? 그것은 무엇을 합니까?

커서 속성은 CSS의 커서 속성으로, 마우스가 애플리케이션 요소 위에 있을 때 사용할 수 있는 마우스 커서의 유형, 즉 커서의 유형(모양)을 지정합니다. 커서가 표시됩니다.

커서 속성을 통해 미리 정의된 여러 커서 유형 중 하나 또는 이미지(아래 예 참조)로 커서를 설정할 수 있습니다.

참고: cursor 속성은 포인팅 장치(예: 마우스)가 있는 장치에만 유효합니다. 터치 장치에는 영향을 미치지 않습니다.

커서 속성은 요소에 특정 기능을 제공하기 위해 사용자에게 시각적 피드백과 단서를 제공하는 데 사용되며, 이는 종종 더 나은 사용자 경험을 제공하는 데 중요합니다.

CSS에 정의된 커서 값은 브라우저와 운영체제에 따라 다른 효과를 나타낼 수 있습니다. 예를 들어, 일부 브라우저(예: Windows 7의 Firefox)에서는 이동(일반적으로 요소를 드래그할 수 있음을 나타내는 데 사용됨) 커서를 4방향 화살표로 표시하는 반면, 다른 브라우저(예: Mac OS X의 Firefox)에서는 표시합니다. 손 모양 커서. 이 경우 커서를 모든 브라우저와 플랫폼에서 정확히 동일하게 보이는 특정 커서로 만들고 싶다면 기본 CSS 키워드 대신 이미지를 사용할 수 있습니다. ### ## ## #####공식 구문### ## ## ## ## #####구문 :#🎜🎜 ## 🎜 🎜#

cursor: [ [<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 | progress ] ] | inherit ;

초기: Automatic

적용 대상: 모든 요소#🎜🎜 # 애니메이션: 없음

새로운 CSS3 구문:

# 🎜 🎜# CSS3에서는 커서 속성에 추가 값과 옵션이 추가되었습니다. 아래를 살펴보겠습니다.

cursor: [ [ <URI> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]；

설명: #🎜 🎜 #

1. 모든 브라우저가 위의 값을 모두 지원하는 것은 아니며 모든 값이 모든 브라우저 및 운영 체제에서 동일하게 표시되는 것은 아닙니다. 2. 이미지 커서(사용자 정의 커서)

: 참조 이미지

#🎜 🎜 #커서로 사용할 이미지를 가리키는 하나 이상의 쉼표로 구분된 url()입니다.

cursor：url（例如1：.svg #linkcursor），url（例如2： .cur），auto ;

참고: URL이 아닌 표준 커서 키워드는 대체 목록 끝에 제공되어야 합니다. < 첫 번째 숫자는 x 좌표이고 두 번째 숫자는 y 좌표입니다. 예를 들어,

cursor: url(some-cursor.png) 2 15, pointer;

은 커서의 핫스팟을 왼쪽 위 모서리(0,0)부터 시작하여 (2,15)픽셀로 설정합니다.

지정하지 않으면 핫스팟 좌표를 파일 자체에서 읽거나(CUR 및 XBM 파일의 경우) 이미지의 왼쪽 상단에 설정합니다.

이미지 커서를 살펴보겠습니다.

3. #🎜 🎜#

none: 커서가 표시되지 않도록 정의

보통 화살표로 표시됨: 기본, 자동, 컨텍스트 메뉴

보통 손 모양으로 표시됨 : 포인터, 잡기, 잡기, 손

help: 일반적으로 물음표 또는 풍선으로 표시됨

로드 대기 중: 진행률(회전하는 비치 볼 또는 화살표가 있는 화살표) 시계 또는 모래시계), 대기(시계 또는 모래시계)

방향 또는 이동을 나타냅니다.

e-resize, ne-resize, n-resize, nw-resize, w-resize, sw -resize, s-resize, se- resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize,, all-scroll, move

은 다음을 의미합니다. 금지: no-drop, not-allowed

Browser support

다음 버전을 지원합니다: #🎜 🎜#

#🎜🎜 #

*은 필수 접두사를 나타냅니다.

요약:

위 내용은 이 글의 전체 내용이며, 커서 속성의 각 속성값으로 정의된 커서 모양을 직접 컴파일해 보시면 됩니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 동영상 튜토리얼을 추천합니다:

css3 tutorial

!

위 내용은 CSS의 커서 속성은 무엇입니까? 커서 속성 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!