인터넷을 자주 서핑하는 친구들은 일부 웹사이트의 마우스가 일반적인 대각선 위쪽 화살표 모양이 아니라 십자 모양, 왼쪽 화살표 또는 물음표 등의 모양이라는 것을 알아차린 적이 있습니다. 다양한 기능 영역을 반영하기 위해 마우스가 웹 페이지의 다양한 위치에 다양한 모양을 표시하도록 하려는 경우 웹 사이트에 고유한 스타일을 반영하려면 마우스 스타일 작업을 고려하십시오. 실제로 마우스 스타일의 용도는 다양합니다. 그러면 다양한 마우스 스타일을 어떻게 구현할 수 있습니까? Dreamweaver를 시작하고 마우스 스타일을 적용할 웹 페이지를 열고 기본 창에서 텍스트 드롭다운 메뉴를 선택한 다음 그런 다음 CSS 스타일 하위 메뉴에서 새로 만들기를 선택합니다. 스타일 명령은 새 스타일 시트를 만듭니다. (참고: 웹 페이지에 스타일 시트가 이미 있는 경우 CSS 스타일 스타일 시트 편집을 선택하여 스타일 시트를 편집할 수 있습니다.) 새 스타일 대화 상자가 나타납니다. 유형 항목에는 사용자 정의 스타일 만들기, HTML 태그 재정의 및 CSS 선택기 사용이라는 세 가지 라디오 버튼이 있습니다. 그중 Make Custom Style은 사용자 정의 스타일로 스타일 이름이 점으로 시작합니다. CSS 선택기를 사용하는 것은
a:active/a:hover/a:link/a:visited
4개의 하이퍼링크 스타일이 포함된 CSS 선택기를 사용하는 것입니다.; HTML 태그 재정의는 abodybr 등과 같은 HTML 시스템 태그를 정의하는 스타일입니다. 이 페이지의 하이퍼링크에 대한 마우스 스타일만 설정한다고 가정합니다. 여기에서는 HTML 태그 재정의 옵션에서 태그를 선택합니다. 아래 정의 항목에 대해 이 문서만을 선택합니다. 확인 버튼을 클릭하세요. 대화 상자의 스타일 정의가 팝업되고 하이퍼링크 스타일 설정이 입력됩니다. 왼쪽의 카테고리는 스타일 카테고리입니다. 여기서는 다른 항목에 대한 설명이 없습니다. 오른쪽의 Visual Effect에서 Cursor 항목을 볼 수 있는데, 이는 마우스 스타일을 설정하는 핵심 항목입니다. 오른쪽의 드롭다운 메뉴를 클릭하고 필요한 마우스 스타일을 선택한 후 확인 버튼을 클릭하세요. 각 스타일의 일반적인 의미에 대해 이야기해 보겠습니다.
손: 익숙한 손 모양입니다.
crosshair : 십자 모양의 것으로 Little Turtle 홈페이지에서 사용하는 스타일입니다.
text: 텍스트 위로 마우스를 이동할 때의 스타일입니다.
wait: 기다림의 효과입니다.
default: 기본 효과입니다.
help: 물음표가 있는 마우스 스타일입니다.
e-크기 조정: 오른쪽 화살표입니다.
ne-resize: 오른쪽 위쪽을 가리키는 화살표입니다.
n-resize: 위쪽 화살표입니다.
nw-resize: 왼쪽 위쪽을 가리키는 화살표입니다.
w-resize: 왼쪽으로 화살표 패스입니다.
sw-resize: 왼쪽 아래를 가리키는 화살표입니다.
s-resize: 아래쪽 화살표입니다.
se-resize: 오른쪽 아래를 가리키는 화살표입니다.
자동: 시스템의 자동 효과입니다.
물론, 필요에 따라 다른 태그에 스타일을 적용하거나 단순히 텍스트의 특정 단락에 적용할 수도 있습니다. 독자가 CSS 코드에 익숙하다면 직접 코드를 작성하는 것이 더 편리할 수도 있습니다. 특히, 위치마다 다른 마우스 스타일을 사용하거나 탭마다 다른 마우스 스타일을 사용하려는 경우. 특정 태그에 스타일을 직접 작성하면 됩니다.
방법은 <태그 스타일=커서:마우스_스타일>입니다. 여기서 tag는 태그 이름이고, mouse_style은 손/십자선/텍스트/대기 등과 같은 마우스 스타일입니다.
마우스 스타일 설정에 대한 모든 사람의 이해를 심화하기 위해 구체적인 예를 들어 보겠습니다.
<span style=cursor:hand> 손: 익숙한 손 모양입니다. < /span>
<span style=cursor:crosshair>crosshair : 십자선으로 Little Turtle 홈페이지에서 사용하는 스타일입니다. < /span>
<span style=cursor:text>text: 일반적으로 마우스가 텍스트로 이동하는 스타일입니다. < /span>
<span style=cursor:wait>wait: 기다림의 효과입니다. < /span>
<span style=cursor:default>default: 기본 효과입니다. < /span>
<span style=cursor:help>help: 물음표가 있는 마우스 스타일입니다. < /span>
<span style=cursor:e-resize>e-resize: 오른쪽 화살표입니다. < /span>
<span style=cursor:ne-resize>ne-resize: 오른쪽 위쪽을 가리키는 화살표입니다. < /span>
<span style=cursor:n-resize>n-resize: 위쪽 화살표입니다. < /span>
<span style=cursor:nw-resize>nw-resize: 왼쪽 위를 가리키는 화살표입니다. < /span>
<span style=cursor:w-resize>w-resize: 왼쪽으로 가는 화살표입니다. < /span>
<span style=cursor:sw-resize>sw-resize: 왼쪽 아래를 가리키는 화살표입니다. < /span>
<span style=cursor:s-resize>s-resize: 아래쪽 화살표입니다. < /span>
<span style=cursor:se-resize>se-resize: 오른쪽 아래를 가리키는 화살표입니다. < /span>
<span style=cursor:auto>auto: 시스템의 자동 효과입니다. </span>
위 코드를 웹페이지에 복사하고 F12를 눌러 미리보세요. 해당 텍스트 위로 마우스를 이동하면 마우스가 어떻게 되는지 확인해보세요. 해당 스타일로 표시되나요?