Оглавление

Изменение вида курсора

При наведении курсора на ссылку или какой-либо иной элемент страницы он нередко приобретает вид руки. Иногда у разработчика может возникнуть необходимость в изменении вида курсора для акцентирования внимания на каком-либо действии (или для соответствия определенному дизайну интерфейса).

 

Решение
Вид курсора можно изменить с помощью CSS-свойства cursor. К примеру, чтобы курсор изменял свой вид при наведении на ссылки на справочную документацию, можно задать следующее правило стиля:

a.help {
cursor: help;
}

В табл. 4.1 представлены доступные в CSS 2.1 свойства и результат их применения при просмотре документа в браузере Internet Explorer 8.

 

Таблица 4.1. Стандартные курсоры CSS2.1 при просмотре в IE8

pointer

pointer

default

default

crosshair

crosshair

text

text

help

help

move

move

n-resize

n-resize

ne-resize

ne-resize

nw-resize

nw-resize

s-resize

s-resize

se-resize

se-resize

nw-resize

sw-resize

e-resize

e-resize

w-resize

     w-resize    

wait

wait

progress

       progress      

определяется
браузером

auto

пользовательское
изображение

url("url")

 

 

Обсуждение
Свойство cursor может принимать много различных значений. Изменение вида курсора в веб-приложении – полезный прием, позволяющий сделать интерфейс более дружественным. Это дает пользователю дополнительную информацию о назначении тех или иных элементов (например, при наведении курсора на справочный текст он приобретает вид вопросительного знака).

 

Предупреждение
Изменение вида курсора может привести к путанице! Описанный прием следует использовать с осторожностью, принимая во внимание тот факт, что пользователи обычно привыкают к стандартному поведению браузера – например, к тому, что при наведении на ссылку курсор превращается в руку с указующим пальцем.


В табл. 4.1 представлены различные значения CSS-свойства cursor. Они поддерживаются большинством современных браузеров, включая Internet Explorer 6 и выше, Safari, Opera, Firefox и Chrome. Однако отдельные значения могут не обрабатываться, поэтому не забывайте о необходимости тестирования.

 

В спецификации CSS3 описаны дополнительные значения данного свойства, представленные в табл. 4.2, однако их поддержка реализована в полной мере браузерами Firefox и Chrome; Internet Explorer 8 и Safari также поддерживает большинство из них, однако их поддержка браузером Opera на момент написания данной книги отсутствовала (он поддерживает только значения CSS 2.1).

 

Таблица 4.2. Новые значения свойства cursor в CSS3

ЗначениеОтображение  IE8 
FirefoxSafariOperaChrome
copycopy-+--+
aliasalias-+--+
cellcell-+--+
all-scrollall-scroll+++-+
no-dropno-drop+++-+
not-allowednot-allowed+++-+
col-resizecol-resize+++-+
row-resizerow-resize+++-+
vertical-textvertical-text+++-+
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити