Изменение курсора мыши

С помощью стилей можно изменить вид курсора мыши и выбрать один из доступных вариантов. То есть, вы просто заключаете текст, при наведении на который курсор должен измениться, между тегами, например

<span>наш текст</span>

и готово.
Рассмотрим возможные варианты:

--> основной режим курсора:

<span style="cursor:default;">Тут ваш текст</span>

Вы наверно замечали, что в таких браузерах как IE, Mozilla курсор меняется на "ТЕКСТ" как только попадает на текст на сайте. Если вы добавите строчку из примера в тег BODY, то такого происходить не будет.

<!-- выбор справки: --> 
<span style="cursor:help;">Тут ваш текст</span>

<!-- система недоступна: -->  
<span style="cursor:wait;">Тут ваш текст</span>

<!-- графическое выделение: -->  
<span style="cursor:crosshair;">Тут ваш текст</span>

<!-- текст: -->  
<span style="cursor:text;">Тут ваш текст</span>

<!-- изменение вертикальных размеров: -->  
<span style="cursor:n-resize;">Тут ваш текст</span>

<!-- изменение горизонтальных размеров: -->  
<span style="cursor:e-resize;">Тут ваш текст</span>

<!-- изменение размеров по диагонали 1: -->  
<span style="cursor:nw-resize;">Тут ваш текст</span>

<!-- изменение размеров по диагонали 2: -->  
<span style="cursor:ne-resize;">Тут ваш текст</span>

<!-- перемещение: -->  
<span style="cursor:move;">Тут ваш текст</span>

<!-- выбор ссылки: -->  
<span style="cursor:pointer;">Тут ваш текст</span>

<!-- Так же изменить курсор на "ССЫЛКА" можно вот так: --> 
<span style="cursor:hand;">Тут ваш текст</span>

но этот вариант почему-то отказывается работать в Mozilla, так что используйте лучше pointer

Остались вопросы? Спрашивайте!

Понравилась статья? Расскажи другим :)

Опубликовано: 04 октября 2010 | Просмотров: 5773