Прежде чем применить возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
Вид | Значение | Тест | Пример |
---|---|---|---|
default | ТЕСТ | cursor:default | |
crosshair | ТЕСТ | cursor:crosshair | |
pointer | ТЕСТ | cursor:pointer | |
move | ТЕСТ | cursor:move | |
text | ТЕСТ | cursor:text | |
wait | ТЕСТ | cursor:wait | |
help | ТЕСТ | cursor:help | |
n-resize | ТЕСТ | cursor:n-resize | |
ne-resize | ТЕСТ | cursor:ne-resize | |
e-resize | ТЕСТ | cursor:e-resize | |
se-resize | ТЕСТ | cursor:se-resize | |
s-resize | ТЕСТ | cursor:s-resize | |
sw-resize | ТЕСТ | cursor:sw-resize | |
w-resize | ТЕСТ | cursor:w-resize | |
nw-resize | ТЕСТ | cursor:nw-resize |
Синтаксис разработки курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере 1 показано, как можно заново определить вид курсора при наведении его на разные ссылки.
Пример 1. Изменение курсора при наведении его на ссылку
Результат данного примера показан ниже.
Если вы желаете заново определить курсор мыши для всей web-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей web-страницы
Также можно задать разный вид курсора для отдельных областей web-страницы используя теги <DIV> или <SPAN>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <SPAN>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей web-страницы
Результат данного примера показан ниже.
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект