CSS를 사용하여 커서 모양 변경-CSS 튜토리얼-php.cn

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

Syntax

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

로그인 후 복사

다음은 CSS 커서 속성-

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

<!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

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

원천：tutorialspoint.com

이전 기사：CSS 선택자란 무엇입니까? 다음 기사：CSS에서 align-self 속성을 기본값으로 설정하는 방법은 무엇입니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

미래를 창조하세요: 완전 초보자를 위한 Java 프로그래밍

2024-10-13 13:32:21
당신은 혼자가 아닙니다: 지원적인 커뮤니티와 함께 Python을 마스터하세요

2024-10-12 11:58:51
초보자에서 코더까지: Python 프로그래밍의 힘을 활용하세요

2024-10-11 20:06:51
프로그래머처럼 생각하기: Java의 기본 사항 배우기

2024-10-11 18:59:31
Java Made Simple: 초보자를 위한 프로그래밍 능력 가이드

2024-10-11 18:30:51
PHP로 블로그 구축: 초보자에게 친숙한 프로젝트

2024-10-11 15:51:51
시스템 언어 말하기: 한 번에 한 줄씩 C 배우기

2024-10-11 15:42:10
C의 데이터 구조 및 알고리즘: 초보자에게 친숙한 접근 방식

2024-10-11 14:41:20
눈물 없는 코딩: 쉬운 방법으로 C 배우기

2024-10-11 14:08:31
Java를 사용한 데이터 분석: 정보 처리를 위한 초보자 가이드

2024-10-11 13:42:21

에서 2024-04-29 11:01:01

2204

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2348

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

1967

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

1854

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

1915

인기 추천

최신 강좌

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

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