CSS 커서 속성 및 사용법 요약

cursor 속성은 표시할 커서의 유형(모양)을 지정합니다. 이 속성은 마우스 포인터가 요소의 경계 내에 위치할 때 사용되는 커서 모양을 정의합니다(CSS2.1은 이 범위를 결정하는 경계를 정의하지 않지만).

DIV CSS를 배치할 때 마우스가 포인터를 통과하여 손가락 모양으로 바뀌는 등 객체 내에서 마우스 포인터 커서의 제어를 만나게 됩니다. 다음으로 마우스 포인터 스타일의 커서 제어를 소개하겠습니다. . 시스템 기본 마우스 포인터 스타일 외에도 CSS를 통해 이미지를 마우스 포인터로 설정할 수 있습니다. 일부 웹사이트에서는 마우스 포인터에 대한 다양한 작은 이미지 스타일을 사용하는 것이 일반적입니다. CSS 커서.

1. CSS-cursor 속성

cursor 속성은 표시할 커서의 유형(모양)을 지정합니다.

2.css 커서 URL 사용 형식 자세한 설명

css 커서 URL 사용 형식: css: {cursor:url('icon path'),auto;} //IE, FF, Chrome 브라우저 모두 사용 가능

예제 코드:

html{cursor: url("ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}

분석: 이전 URL은 사용자 정의 마우스 아이콘 경로이고 두 번째 매개변수 auto는 CSS 표준 커서 스타일이며 다른 속성(예: 포인터/기본값 등)으로 대체될 수 있습니다!

3.

커서 마우스 스타일?

auto: 일반 마우스

crosshair: 십자형 마우스

default: 기본 마우스

pointer: 포인트 마우스(손, IE5에서는 손만 인식하기 위해 2개를 씁니다. )

move: 마우스를 움직입니다.

4.

커서에서 그림 설정 문제에 대해

몇 가지 주의 사항: 1. 그림 주소는 절대 경로입니다. 2. 그림 크기는 32*32가 바람직합니다. , 어쨌든 브라우저마다 파싱되는 크기가 다릅니다

5.

css 커서 마우스 모양

url 사용할 사용자 정의 커서의 URL입니다.

참고: URL로 정의된 사용 가능한 커서가 없는 경우를 대비해 항상 이 목록 끝에 일반 커서를 정의하세요.

default 기본 커서(보통 화살표)

auto 기본값. 브라우저가 설정한 커서입니다.

crosshair 커서가 십자선으로 나타납니다.

pointer 커서는 링크를 나타내는 포인터(손)로 나타납니다.

move 이 커서는 개체를 이동할 수 있음을 나타냅니다.

6.

CSS의 커서 속성 예제 코드에 대한 자세한 설명

CSS의 커서 속성

오늘은 첫 번째 블로그를 통해 이를 요약해 보겠습니다.

cursor 속성은 커서의 표시 스타일을 제어하는 ​​데 사용됩니다. 가능한 값은 다음과 같습니다.

cursor:url()*|
{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}

*는 이 값 중 하나 이상을 쓰는 것을 의미하며 URL 뒤의 {}에서 값을 선택할 수 있습니다. .

관련 질문과 답변:

1.

javascript - window.resize 이벤트를 요소에 바인딩한 후에는 이전에 설정된 커서 속성이 유효하지 않습니다.

2 - 시각적 모드에서 < 매핑. ;tab> 분할 창 간 커서 전환을 구현하시겠습니까?

1. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

2 마지막으로

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