Изменение вида курсора
При наведении курсора на ссылку или какой-либо иной элемент стра- ницы он нередко приобретает вид руки. Иногда у разработчика может возникнуть необходимость в изменении вида курсора для акцентиро- вания внимания на каком-либо действии (или для соответствия опреде- ленному дизайну интерфейса).
Решение
Вид курсора можно изменить с помощью CSS-свойства cursor. К приме- ру, чтобы курсор изменял свой вид при наведении на ссылки на спра- вочную документацию, можно задать следующее правило стиля:
a.help {
cursor: help;
}
В табл. 4.1 представлены доступные в CSS 2.1 свойства и результат их применения при просмотре документа в броузере Internet Explorer 8.
Обсуждение
Свойство cursor может принимать много различных значений. Измене- ние вида курсора в веб-приложении – полезный прием, позволяющий сделать интерфейс более дружественным. Это дает пользователю до- полнительную информацию о назначении тех или иных элементов (на- пример, при наведении курсора на справочный текст он приобретает вид вопросительного знака).
Предупреждение
может привести к путанице! Описанный прием следует использовать с осторожностью, принимая во внимание тот факт, что пользователи обычно привыкают к стандартному поведению броузера – на- пример, к тому, что при наведении на ссылку курсор превращается в руку с указующим пальцем.
Таблица 4.1. Стандартные курсоры CSS2.1 при просмотре в IE8
|
pointer |
default |
crosshair |
|
text |
help |
move |
|
n-resize |
ne-resize |
nw-resize |
|
s-resize |
se-resize |
sw-resize |
|
e-resize |
w-resize |
wait |
|
progress |
определяется броузером auto |
пользовательское изображение url("url") |
В табл. 4.1 представлены различные значения CSS-свойства cursor. Они поддерживаются большинством современных броузеров, включая In- ternet Explorer 6 и выше, Safari, Opera, Firefox и Chrome. Однако от- дельные значения могут не обрабатываться, поэтому не забывайте о не- обходимости тестирования.
В спецификации CSS3 описаны дополнительные значения данного свойства, представленные в табл. 4.2, однако их поддержка реализова- на в полной мере броузерами Safari, Firefox и Chrome; Internet Explorer
8 также поддерживает большинство из них, однако их поддержка броу- зером Opera на момент написания данной книги отсутствовала (он под- держивает только значения CSS 2.1).
Таблица 4.2. Новые значения свойства cursor в CSS3
|
Значение |
Отображение (как в IE8) |
|
copy |
поддержка отсутствует |
|
alias |
поддержка отсутствует |
|
cell |
поддержка отсутствует |
|
all-scroll |
|
|
no-drop |
|
|
not-allowed |
|
|
col-resize |
|
|
row-resize |
|
|
vertical-text |
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Выравнивание текста по ширине (0)
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)
- Как позиционировать фоновое изображение (0)
- Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на JavaScript (0)