Webmasters.BY

В этой статье мы будем изучать свойство 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;

Создание собственного курсора

Наконец, вы можете создать свой собственный курсор, на основе изображения, например,

Примечание:

1. Internet Explorer требует файл для курсора Windows (расширение .cur).
2. Firefox, Chrome и Safari требуют изображение - рекомендуется 24-битный прозрачный PNG.
3. Firefox также требует второй параметр, для использования в старых браузерах.
4. Это не работает пока в Opera.
5. х и у - дополнительные свойства в Firefox, Chrome и Safari, которые определяют точное положение указателя относительно левого верхнего угла. Если они опущен, по-умолчанию - 0 0.

Перевод с sitepoint.com