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

Syntax

집

웹 프론트엔드

CSS 튜토리얼

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

王林

Sep 23, 2023 pm 02:53 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

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

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7723

자바 튜토리얼

1643

Cakephp 튜토리얼

1396

라라벨 튜토리얼

1290

PHP 튜토리얼

1233

Related knowledge

vue 3 Apr 02, 2025 pm 06:32 PM

그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축 Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까? Apr 02, 2025 pm 06:17 PM

나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.

끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드 Apr 03, 2025 am 10:30 AM

다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

CI/CD에 약간 Apr 02, 2025 pm 06:21 PM

"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.

반응 형 디자인을위한 브라우저 비교 Apr 02, 2025 pm 06:25 PM

목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다

WordPress 블록 편집기에서 Markdown 및 현지화 사용 Apr 02, 2025 am 04:27 AM

WordPress 편집기에서 사용자에게 직접 문서를 표시 해야하는 경우 가장 좋은 방법은 무엇입니까?

플렉스 레이아웃의 자주색 슬래시 영역이 잘못된 '오버플로 공간'으로 간주되는 이유는 무엇입니까? Apr 05, 2025 pm 05:51 PM

플렉스 레이아웃의 보라색 슬래시 영역에 대한 질문 플렉스 레이아웃을 사용할 때 개발자 도구 (d ...)와 같은 혼란스러운 현상이 발생할 수 있습니다.

See all articles

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 실시간 데모

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

Syntax

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제