CSS에서는 커서 속성을 사용하여 마우스를 작은 손 모양으로 변경할 수 있습니다. 기본 구문은 "cursor:pointer;"입니다. 커서 속성은 마우스 포인터가 요소 경계 내에 위치할 때 사용되는 커서 모양을 정의합니다. 값을 "포인터"로 설정하면 마우스가 더 작아집니다.
이 튜토리얼의 운영 환경: 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 커서 속성
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 | 이 커서는 사용 가능한 도움말(일반적으로 물음표 또는 풍선)을 나타냅니다. |
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS를 사용하여 마우스를 작은 손처럼 보이게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!