English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS 커서 속성은 마우스가 특정 영역이나 웹 페이지의 링크에 오게 되면 커서 유형(즉, 마우스 포인터)을 정의하는 데 사용됩니다.
브라우저는 일반적으로 웹 페이지의 어떤 빈 공간에도 마우스 포인터를 표시하며, 손가락을 신발에 걸친 모습을 링크나 클릭할 수 있는 아이템에 표시하고, 편집 커서를 어떤 텍스트나 텍스트 필드에 표시합니다. CSS를 사용하여 이러한 속성을 다시 정의하여 다양한 다른 커서를 표시할 수 있습니다.
h1 {
cursor: move;
}
p {
cursor: text;
}테스트해 보기‹/›다음은 대부분의 브라우저가 수락할 수 있는 다양한 커서를 보여줍니다. 마우스 포인터를 출력 열의 “TEST” 링크에 두고 커서를 보여주세요.
| 보기 | 값 | 예제 | 보기 |
|---|---|---|---|
| default | a:hover{cursor:default;} | 테스트 | |
| pointer | a:hover{cursor:pointer;} | 테스트 | |
| text | a:hover{cursor:text;} | 테스트 | |
| wait | a:hover{cursor:wait;} | 테스트 | |
| help | a:hover{cursor:help;} | 테스트 | |
| progress | a:hover{cursor:progress;} | 테스트 | |
| crosshair | a:hover{cursor:crosshair;} | 테스트 | |
| move | a:hover{cursor:move;} | 테스트 | |
| url() | a:hover{cursor:url("custom.cur"), default;} | 테스트 |
보기더 많은 커서»
완전히 커스텀된 커서도 가질 수 있습니다.
cursor 속성은 사용자 정의 커서 값의 쉼표 구분된 목록을 처리하고, 뒤에일반 커서첫 번째 커서가 잘못 지정되거나 찾을 수 없으면, 쉼표로 구분된 목록의 다음 커서를 사용하며, 이를 반복하여 사용 가능한 커서를 찾을 때까지 이어집니다.
사용자 정의 커서가 유효하지 않거나 브라우저에 지원되지 않으면 목록의 마지막에 있는 일반 커서가 사용됩니다.
추천:커서에 사용할 수 있는 표준 형식은 .cur 형식입니다. 그러나, 온라인에서 무료로 제공되는 이미지 변환기 소프트웨어를 사용하여 .jpg과 같은 이미지를 .cur 형식으로 변환할 수 있습니다.
a {
cursor: url("custom.gif"), url("custom.cur"), default;
}테스트해 보기‹/›위의 예제에서 custom.gif, custom.cur는 커스텀 커서 파일로 서버 공간에 업로드되었으며, default는 일반 커서입니다. 커스텀 커서가 분실되거나 브라우저가 그것을 지원하지 않으면 일반 커서가 사용됩니다.
경고:커스텀 커서를 선언하려면 목록의 마지막에 정의해야 합니다일반 커서아니면 커스텀 커서가 올바르게 표시되지 않습니다.
이것은 커스텀 커서의 실제 데모입니다.
주의: IE9이전 버전에서는 .cur 스태틱 커서와 .ani 애니메이션 커서의 URL 값만 지원했습니다. 그러나 Firefox, Chrome, Safari와 같은 브라우저는 .cur, .png, .gif, .jpg을 지원하지만 .ani를 지원하지 않습니다.