Параметры курсора

Параметры курсора

CSS предоставляет нам одну очень интересную возможность — указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов.

Атрибут стиля cursor устанавливает форму курсора мыши при наведении его на данный элемент Web-страницы. Данный атрибут можно применить к любому элементу Web-страницы, как блочному, так и встроенному:

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit

Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.

— auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.

— default — курсор по умолчанию, обычно стрелка. none — курсор мыши вообще не отображается. help — стрелка с вопросительным знаком.

— pointer — "указующий перст". Обычное поведение при наведении курсора мыши на гиперссылку.

— progress — стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.

— wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.

— text — текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.

Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.

Вот пример задания курсора мыши в виде "указующего перста" для пунктов списка, формирующего только что созданную полосу навигации:

#navbar LI { cursor: pointer }

Что дальше?

В настоящей главе мы разобрались с атрибутами стиля, задающими параметры абзацев, списков и отображения элементов Web-страницы. Их немного, но при должном применении они могут заметно улучшить наши Web-творения.

В следующей главе мы познакомимся с блочными контейнерами — "коллегами" знакомых нам по главе 8 встроенных контейнеров. Мы выясним, как можно расположить их на Web-странице в нужном нам порядке и какие атрибуты стиля CSS для этого следует применять. Блочные контейнеры — чрезвычайно мощный инструмент, и мы уделим им много времени.

А еще в следующей главе мы всерьез займемся Web-дизайном.