CSS를 사용하여 마우스를 작은 손처럼 보이게 만드는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 마우스를 작은 손처럼 보이게 만드는 방법

青灯夜游

풀어 주다： 2023-01-03 09:27:51

원래의

44981명이 탐색했습니다.

CSS에서는 커서 속성을 사용하여 마우스를 작은 손 모양으로 변경할 수 있습니다. 기본 구문은 "cursor:pointer;"입니다. 커서 속성은 마우스 포인터가 요소 경계 내에 위치할 때 사용되는 커서 모양을 정의합니다. 값을 "포인터"로 설정하면 마우스가 더 작아집니다.

CSS를 사용하여 마우스를 작은 손처럼 보이게 만드는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css 마우스가 작아집니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p{
				border: 1px solid red;
			}
			#cursor2{
				cursor:pointer;/*鼠标变小手*/
				}
		</style>
	</head>
	<body>
		<p id="cursor1">测试文本！</p>
		<p id="cursor2">测试文本！</p>
	</body>
</html>

로그인 후 복사

Rendering:

CSS를 사용하여 마우스를 작은 손처럼 보이게 만드는 방법

css 커서 속성

cursor 속성은 마우스 포인터가 요소의 경계 내에 위치할 때 사용되는 커서 모양을 정의합니다. [권장 튜토리얼: CSS 비디오 튜토리얼】

속성 값:

Value	Description
url	사용할 사용자 정의 커서의 URL입니다. 참고: URL로 정의된 사용 가능한 커서가 없는 경우를 대비해 항상 이 목록 끝에 일반 커서를 정의하세요.
default	기본 커서(일반적으로 화살표)
auto	기본값. 브라우저가 설정한 커서입니다.
crosshair	커서가 십자선으로 렌더링됩니다.
pointer	커서는 링크를 나타내는 포인터(손)로 렌더링됩니다.
move	이 커서는 개체를 이동할 수 있음을 나타냅니다.
e-resize	이 커서는 직사각형 상자의 가장자리를 오른쪽(동쪽)으로 이동할 수 있음을 나타냅니다.
ne-resize	이 커서는 직사각형 상자의 가장자리를 위쪽 및 오른쪽(북쪽/동쪽)으로 이동할 수 있음을 나타냅니다.
nw-resize	이 커서는 직사각형 상자의 가장자리를 위쪽 및 왼쪽(북쪽/서쪽)으로 이동할 수 있음을 나타냅니다.
n-resize	이 커서는 직사각형 상자의 가장자리를 위쪽(북쪽)으로 이동할 수 있음을 나타냅니다.
se-resize	이 커서는 직사각형 상자의 가장자리를 아래쪽 오른쪽(남쪽/동쪽)으로 이동할 수 있음을 나타냅니다.
sw-resize	이 커서는 직사각형 상자의 가장자리를 아래쪽 및 왼쪽(남쪽/서쪽)으로 이동할 수 있음을 나타냅니다.
s-resize	이 커서는 직사각형 상자의 가장자리를 아래(남쪽)로 이동할 수 있음을 나타냅니다.
w-resize	이 커서는 직사각형 상자의 가장자리를 왼쪽(서쪽)으로 이동할 수 있음을 나타냅니다.
text	이 커서는 텍스트를 나타냅니다.
wait	이 커서는 프로그램이 사용 중임을 나타냅니다(보통 시계 또는 모래시계).
help	이 커서는 사용 가능한 도움말(일반적으로 물음표 또는 풍선)을 나타냅니다.