CSS로 마우스 모양을 바꾸는 방법
- 王林원래의
- 2021-05-20 14:54:122931검색
CSS에서 마우스 모양을 바꾸는 방법은 지정된 요소에 커서 속성을 추가하고 포인터, 이동, 텍스트 등 속성 값을 필요한 값으로 설정하는 것입니다. 구체적인 코드는 [< ;span style="cursor:pointer" >포인터54bdf357c58b8a65c66d7c19c8e4d114].
이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.
CSS는 커서 속성이라는 매우 유용한 속성을 제공합니다.
cursor 속성은 표시할 커서의 종류(모양)를 지정합니다.
일반적으로 사용되는 일부 속성 값:
default 기본 커서(일반적으로 화살표)
auto 기본값. 브라우저가 설정한 커서입니다.
crosshair 커서가 십자형으로 나타납니다.
pointer 커서는 링크를 나타내는 포인터(손)로 나타납니다.
move 이 커서는 개체를 이동할 수 있음을 나타냅니다.
text 이 커서는 텍스트를 나타냅니다.
wait 이 커서는 프로그램이 사용 중임을 나타냅니다(보통 시계 또는 모래시계).
help 이 커서는 사용 가능한 도움말(일반적으로 물음표 또는 풍선)을 나타냅니다.
코드 예:
<html> <body> <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span style="cursor:auto"> Auto</span><br /> <span style="cursor:crosshair"> Crosshair</span><br /> <span style="cursor:default"> Default</span><br /> <span style="cursor:pointer"> Pointer</span><br /> <span style="cursor:move"> Move</span><br /> <span style="cursor:e-resize"> e-resize</span><br /> <span style="cursor:ne-resize"> ne-resize</span><br /> <span style="cursor:nw-resize"> nw-resize</span><br /> <span style="cursor:n-resize"> n-resize</span><br /> <span style="cursor:se-resize"> se-resize</span><br /> <span style="cursor:sw-resize"> sw-resize</span><br /> <span style="cursor:s-resize"> s-resize</span><br /> <span style="cursor:w-resize"> w-resize</span><br /> <span style="cursor:text"> text</span><br /> <span style="cursor:wait"> wait</span><br /> <span style="cursor:help"> help</span> </body> </html>
위 내용을 복사하여 로컬로 실행하면 구체적인 실행 효과를 확인할 수 있습니다.
관련 영상 공유: css 영상 튜토리얼
위 내용은 CSS로 마우스 모양을 바꾸는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.