>  기사  >  웹 프론트엔드  >  CSS에서 커서 스타일을 변경하는 방법

CSS에서 커서 스타일을 변경하는 방법

青灯夜游
青灯夜游원래의
2019-05-31 13:55:045951검색

CSS에서 커서 스타일을 변경하는 방법

CSS에서는 커서 속성을 사용하여 마우스 포인터가 요소 경계 내에 위치할 때 사용되는 커서 모양을 정의합니다. 커서 속성을 통해 마우스 커서(포인터) 스타일을 설정할 수 있습니다.

커서 속성 구문:

cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url)

가능한 속성 값:

● url: 사용할 사용자 정의 커서의 URL입니다. 참고: 사용 가능한 URL로 정의된 커서가 없는 경우 항상 이 목록 끝에 일반 커서를 정의하십시오.

● 기본값: 기본 커서(보통 화살표)

● 자동: 기본값. 브라우저가 설정한 커서입니다.

● 십자선: 커서가 십자선으로 렌더링됩니다.

●포인터: 커서가 링크를 나타내는 포인터(손)로 나타납니다.

●이동: 이 커서는 개체를 이동할 수 있음을 나타냅니다.

● e-resize: 이 커서는 직사각형 상자의 가장자리를 오른쪽(동쪽)으로 이동할 수 있음을 나타냅니다.

● ne-resize: 이 커서는 직사각형 상자의 가장자리를 위쪽 및 오른쪽(북쪽/동쪽)으로 이동할 수 있음을 나타냅니다.

● nw-resize: 이 커서는 직사각형 상자의 가장자리를 위쪽 및 왼쪽(북쪽/서쪽)으로 이동할 수 있음을 나타냅니다.

● n-resize: 이 커서는 직사각형 상자의 가장자리를 위쪽(북쪽)으로 이동할 수 있음을 나타냅니다.

● se-resize: 이 커서는 직사각형 상자의 가장자리를 아래쪽 오른쪽(남쪽/동쪽)으로 이동할 수 있음을 나타냅니다.

● sw-resize: 이 커서는 직사각형 상자의 가장자리를 아래쪽 및 왼쪽(남쪽/서쪽)으로 이동할 수 있음을 나타냅니다.

● s-resize: 이 커서는 직사각형 상자의 가장자리를 아래쪽(북쪽/서쪽)으로 이동할 수 있음을 나타냅니다.

● w-resize: 이 커서는 직사각형 상자의 가장자리를 왼쪽(서쪽)으로 이동할 수 있음을 나타냅니다.

● text: 이 커서는 텍스트를 나타냅니다.

● 대기: 이 커서는 프로그램이 사용 중임을 나타냅니다(보통 시계 또는 모래시계).

● help: 이 커서는 사용 가능한 도움말(일반적으로 물음표 또는 풍선)을 나타냅니다.

일반적으로 사용되는 커서 지침

1, div{ 커서:기본 }기본 일반 마우스 포인터div{ cursor:default }默认正常鼠标指针

2、div{ cursor:hand }div{ cursor:text } 文本选择效果

3、div{ cursor:move } 移动选择效果

4、div{ cursor:pointer } 手指形状 链接选择效果

5、div{ cursor:url(url图片地址) }

2, div{ 커서:손 } 및 div{ 커서:텍스트 } 텍스트 선택 효과

3, div{ 커서:이동 } 선택 이동 효과

4, div{ 커서:포인터 } code > 손가락 모양 링크 선택 효과<p><img src="https://img.php.cn/upload/image/209/931/468/CSS%EC%97%90%EC%84%9C%20%EC%BB%A4%EC%84%9C%20%EC%8A%A4%ED%83%80%EC%9D%BC%EC%9D%84%20%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94%20%EB%B0%A9%EB%B2%95" title="CSS에서 커서 스타일을 변경하는 방법" alt="CSS에서 커서 스타일을 변경하는 방법" style="max-width:90%" style="max-width:90%" border="0" vspace="0" style="width: 331px; height: 400px;">5, <code>div{ 커서:url(url 이미지 주소) }개체를 그림으로 설정

커서 스타일 효과 그림

🎜마우스 포인터 설명🎜 🎜🎜cursor는 개체 위에서 움직이는 마우스 포인터에 사용되는 시스템 사전 정의 커서 모양을 설정하거나 검색합니다. 🎜🎜마우스 포인터 스타일을 제어하고 설정하는 것이 일반적이지만 커서를 남용하지 말고 사용자 정의 이미지를 마우스 스타일로 쉽게 설정하지 마십시오. 이렇게 하면 웹 페이지가 복잡해지고 사용자 경험과 일치하지 않게 됩니다. 커서를 주의해서 사용하십시오. 🎜

위 내용은 CSS에서 커서 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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