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

집

웹 프론트엔드

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

성명

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

관련 기사

@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.