집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 커서 모양 변경

CSS를 사용하여 커서 모양 변경

王林앞으로: 2023-09-23 14:53:051489검색

CSS 커서 속성을 사용하여 HTML 문서의 다양한 요소에 대한 커서 이미지를 조작할 수 있습니다.

Syntax

The syntax of CSS cursor property is as follows:
Selector {
   cursor: /*value*/
}

다음은 CSS 커서 속성-

3자동4cell5context-menu6 col-resize 7복사 8crosshair9default 10e-resize11새 크기 조정 12grab13 Grab n-resizene-resizenew-resizens-resizenw-resizenwse-resizeno-dropNone허용되지 않음포인터Progress 는 상자의 가장자리를 아래쪽(남쪽)으로 이동하는 것을 의미합니다. 은 상자의 가장자리를 오른쪽(남쪽/동쪽)으로 이동한다는 의미입니다. 은 테두리가 왼쪽(남서쪽)으로 이동해야 함을 나타냅니다. 은 텍스트를 나타냅니다. 선택할 수 있는 것 사용자 정의 커서에 대한 URL의 쉼표로 구분된 목록, 범용 커서는 끝에 안전 장치로 언급됨는 다음을 나타냅니다. 선택적 수직 레이아웃 텍스트 는 상자의 가장자리가 왼쪽(서쪽)으로 이동함을 의미합니다. 프로그램을 의미합니다. 맞다 Busy는 뭔가를 확대할 수 있다는 뜻뭔가를 줄일 수 있다는 뜻 커서 속성을 기본값으로 설정합니다. 상위 요소에서 커서 속성을 상속합니다.

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 5px;
   float: left;
}
#one {
   background-color: beige;
}
#two {
   background-color: lavender;
}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nw-resize {cursor: nw-resize;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
</style></head>
<body>
<div id="one">
<div class="nw-resize">left corner</div><div class="n-resize">up</div>
<div class="ne-resize">right corner</div>
</div>
<div id="two">
<div class="not-allowed">Not-allowed</div><div class="pointer">Pointer</div>
</div>
</body>
</html>

Output

Sr의 값입니다. 어떤 방향으로든 스크롤됩니다
	기본적으로 브라우저는 커서를 설정합니다
	은 세포의 그룹 )을 선택할 수 있습니다.
	은 컨텍스트 메뉴를 사용할 수 있음을 의미합니다
	열의 크기를 가로로 조정할 수 있음을 의미합니다.
	는 복사할 내용을 의미합니다.
	십자선으로 나타납니다
	기본 커서를 렌더링합니다.
은 상자의 가장자리를 오른쪽(동쪽)으로 이동하는 것을 의미합니다. 이동
	커서 크기를 양방향으로 조정한다는 뜻
	은 물건을 잡을 수 있다는 뜻 td>
	무언가를 잡을 수 있다는 뜻입니다 ㅋㅋㅋ 16
	의미 상자의 가장자리가 위로 이동합니다(북쪽) 17
	은 상자의 가장자리가 위쪽으로 오른쪽(북쪽/동쪽)으로 이동한다는 의미입니다. 18
	는 커서 크기를 양방향으로 조정하는 것을 의미합니다. 19
	은 양방향으로 조정을 의미합니다. 커서 크기 20
	는 상자의 가장자리를 위쪽과 왼쪽(북쪽/서쪽)으로 이동하는 것을 의미합니다. 21
	은 커서 크기를 양방향으로 조정하는 것을 의미합니다 22
	은 드래그한 항목을 여기로 드래그 앤 드롭할 수 없음을 의미합니다. 23
td>	요소에 커서가 표시되지 않습니다. 24
	요청한 작업이 수행되지 않는다는 뜻 25
	링크를 나타내는 포인터입니다 26
	는 프로그램이 사용 중임을 의미합니다. 28 s - resize
	29 se-resize
	30 sw-resize
	31 text
	32 p> URL
	33 vertical-text
	34 w-resize
	35 waiting
	36 Enlarge
	37 strong> Shrink
	38 Initial
39 Inherited
	다음은 CSS 커서 속성 구현 예입니다 Example p> 실시간 데모

위 내용은 CSS를 사용하여 커서 모양 변경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html 指针继承 td th

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：CSS 선택자란 무엇입니까?다음 기사：CSS 선택자란 무엇입니까?