Приднестровская поддержка XOOPS
При наведении курсора на ссылку или какой-либо иной элемент страницы он нередко приобретает вид руки. Иногда у разработчика может возникнуть необходимость в изменении вида курсора для акцентирования внимания на каком-либо действии (или для соответствия определенному дизайну интерфейса).
Решение
Вид курсора можно изменить с помощью CSS-свойства cursor. К примеру, чтобы курсор изменял свой вид при наведении на ссылки на справочную документацию, можно задать следующее правило стиля:
a.help { cursor: help; }
В табл. 4.1 представлены доступные в CSS 2.1 свойства и результат их применения при просмотре документа в браузере Internet Explorer 8.
Таблица 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") |
Обсуждение
Свойство 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 | Firefox | Safari | Opera | Chrome |
copy | ![]() | - | + | - | - | + |
alias | ![]() | - | + | - | - | + |
cell | ![]() | - | + | - | - | + |
all-scroll | ![]() | + | + | + | - | + |
no-drop | ![]() | + | + | + | - | + |
not-allowed | ![]() | + | + | + | - | + |
col-resize | ![]() | + | + | + | - | + |
row-resize | ![]() | + | + | + | - | + |
vertical-text | ![]() | + | + | + | - | + |
Отправитель | Нити |
---|
4 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 4 далее... |