Друзья, которые часто сидят в Интернете, когда-либо замечали, что мышь на некоторых сайтах имеет форму не обычной диагональной стрелки вверх, а формы креста, или стрелки влево, или вопросительного знака и т. д. Если вы хотите, чтобы мышь отображала разные фигуры в разных местах веб-страницы, чтобы отражать разные функциональные области; если вы хотите, чтобы ваш веб-сайт отражал уникальный стиль, подумайте о том, чтобы поработать над стилем мыши. На самом деле стили мыши имеют широкий спектр применения, так как же реализовать разные стили мыши? Запустите Dreamweaver, откройте веб-страницу, к которой вы хотите применить стиль мыши, выберите раскрывающееся меню «Текст» в главном окне и нажмите «Текст». затем выберите «Новый» в подменю «Стиль CSS». Команда «Стиль» создает новую таблицу стилей. (Примечание. Если таблица стилей уже существует на вашей веб-странице, вы можете выбрать «Стили CSS Редактировать таблицу стилей», чтобы отредактировать таблицу стилей.) Появится диалоговое окно «Новый стиль». Элемент «Тип» имеет три переключателя: «Создать собственный стиль», «Переопределить тег HTML» и «Использовать селектор CSS». Среди них «Создать собственный стиль» — это собственный стиль, имя которого начинается с точки; «Использовать селектор CSS» — использовать селектор CSS, который содержит четыре стиля гиперссылок:
a:active/a:hover/a:link/a:visited. ; Redefine HTML Tag — это стиль, определяющий системные теги HTML, такие как abodybr и т. д. Предположим, что мы установили стиль мыши только для гиперссылок на этой странице. Здесь выберите тег в опции «Переопределить HTML-тег». Выберите «Только этот документ» для пункта «Определить» ниже. Нажмите кнопку ОК. Появится диалоговое окно «Определение стиля для», в котором будут заданы настройки стиля гиперссылки. Категория слева — это категория стиля. Здесь нет пояснений для других элементов. Мы выбираем пункт «Расширения». Вы можете увидеть элемент «Курсор» в разделе «Визуальные эффекты» справа, который является ключевым элементом для настройки стиля мыши. Нажмите раскрывающееся меню справа, выберите нужный стиль мыши и нажмите кнопку «ОК». Поговорим об общем значении каждого стиля.
рука: знакомая форма руки.
перекрестие: это крестообразный стиль, который используется на домашней странице Little Turtle.
текст: это стиль, когда мышь перемещается по тексту.
подождите: это эффект ожидания.
по умолчанию: это эффект по умолчанию.
help: стиль мыши с вопросительным знаком.
e-resize: стрелка вправо.
ne-resize: стрелка, указывающая вверх вправо.
n-resize: стрелка вверх.
nw-resize: стрелка, указывающая вверх влево.
w-resize: это проход стрелки влево.
sw-resize: стрелка, указывающая вниз влево.
s-resize: стрелка вниз.
se-resize: стрелка, указывающая вниз вправо.
auto: Это автоматический эффект системы.
Конечно, вы также можете применить стиль к другим тегам по мере необходимости или просто применить его к определенному абзацу текста. Если читатель знаком с кодом CSS, возможно, будет удобнее написать код вручную. В частности, если вы хотите использовать разные стили мыши для разных мест или использовать разные стили мыши для разных вкладок. Просто напишите стиль прямо в определенном теге.
Метод: <tag style=cursor:mouse_style>. Где 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 для предварительного просмотра. Наведите указатель мыши на соответствующий текст и посмотрите, что произойдет с мышью. Он отображается в соответствующем стиле?