В этой статье мы будем изучать свойство CSS cursor, который, как и следовало ожидать, позволяет изменить стиль курсора при перемещении мыши над элементом. Это может быть очень полезным для интерактивных веб-приложений.
Стили cursor в CSS2
В CSS2 предлагается относительно немного вариантов стилей курсора (наведите курсор мыши на свойства, чтобы увидеть, как курсор изменяется):
cursor: auto | cursor: inherit |
cursor: crosshair | cursor: default |
cursor: help | cursor: move |
cursor: pointer | cursor: progress |
cursor: text | cursor: wait |
cursor: e-resize | cursor: ne-resize |
cursor: nw-resize | cursor: n-resize |
cursor: se-resize | cursor: sw-resize |
cursor: s-resize | cursor: w-resize |
Стили cursor в CSS3
В CSS3 мы имеем значительно больший выбор. Эти стили работают в IE9 и в последних версиях Firefox, Chrome, Safari и Опера, если не указано иное:
cursor: none (не работает в IE, Safari, Opera) |
cursor: context-menu (не работает в Firefox, Chrome) |
cursor: cell (не работает в Safari) |
cursor: vertical-text |
cursor: alias (не работает в Safari) |
cursor: copy (не работает в Safari) |
cursor: no-drop |
cursor: not-allowed |
cursor: ew-resize |
cursor: ns-resize |
cursor: nesw-resize |
cursor: nwse-resize |
cursor: col-resize |
cursor: row-resize |
cursor: all-scroll |
Особые курсоры для различных браузеров
Mozilla и некоторые версии Chrome и Safari предлагает ряд стилей со своим префиксом браузера, которые, вероятно, станут частью спецификации CSS3:
cursor: -webkit-grab; cursor: -moz-grab; |
cursor: -webkit-grabbing; cursor: -moz-grabbing; |
cursor: -webkit-zoom-in; cursor: -moz-zoom-in; |
cursor: -webkit-zoom-out; cursor: -moz-zoom-out; |
Создание собственного курсора
Наконец, вы можете создать свой собственный курсор, на основе изображения, например:
cursor: url(images/cursor.cur); cursor: url(images/cursor.png) x y, auto;
Internet Explorer требует файл для курсора Windows (расширение .cur).
Firefox, Chrome и Safari требуют изображение - рекомендуется 24-битный прозрачный PNG.
Firefox также требует второй параметр, для использования в старых браузерах.
Это не работает пока в Opera.
х и у - дополнительные свойства в Firefox, Chrome и Safari, которые определяют точное положение указателя относительно левого верхнего угла. Если они опущен, по-умолчанию - 0 0.
- Подпись автора