| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 1.0+ | 7.0+ | 15.0+ | 3.0+ | 1.5+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Значения
Остальные допустимые значения приведены в табл. 1.
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .
Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementBy >elementID «).style.cursor
Браузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Свойство cursor CSS позволяет указать тип курсора, который должен отображаться пользователю.
Одно из преимуществ этого свойства заключается в использовании изображений для кнопок отправки в формах. По умолчанию, когда курсор наводится на ссылку, курсор меняется от указателя к руке. Однако он не меняет форму для кнопки отправки в форме. Следовательно, всякий раз, когда кто-то наводится на изображение, которое является кнопкой отправки, он обеспечивает визуальную подсказку о том, что изображение можно щелкнуть.
В следующей таблице показаны возможные значения для свойства курсора —
| Значение | Описание |
|---|---|
| auto | Форма курсора зависит от области контекста, в которой она закончилась. Например, I над текстом, «рука» по ссылке и т.д. |
| crosshair | Знак перекрестия или плюс |
| default | Стрелка |
| pointer | Указательная ручка (в IE 4 это значение — рука). |
| move | Перекрестье |
| e-resize | Курсор указывает, что край окна должен быть перемещен вправо (восток). |
| ne-resize | Курсор указывает, что край окна должен быть перемещен вверх и вправо (север / восток). |
| nw-resize | Курсор указывает, что край окна должен быть перемещен вверх и влево (север / запад). |
| n-resize | Курсор указывает, что край окна должен быть перемещен вверх (север). |
| se-resize | Курсор указывает, что край окна должен быть перемещен вниз и вправо (на юг / восток). |
| sw-resize | Курсор указывает, что край окна должен быть перемещен вниз и влево (на юг / запад). |
| s-resize | Курсор указывает, что край окна должен быть перемещен вниз (на юг). |
| w-resize | Курсор указывает, что край окна должен быть перемещен влево (на запад). |
| text | Курсор I. |
| wait | Часы или вращающийся круг. |
| help | Вопросительный знак или воздушный шар, идеально подходит для использования через кнопки справки. |
| Источник файла изображения курсора. |
ПРИМЕЧАНИЕ. Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в местах они ожидали бы увидеть этот курсор. Например, использование перекрестия, когда кто-то наводит курсор на ссылку, может смутить посетителей.
Это приведет к следующему результату, наведите курсор мыши на слова, чтобы увидеть изменение курсора.
Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Вид курсора устанавливает свойство cursor . В следующей таблице перечислены значения этого свойства и соответствующие им виды курсора:
| Значение свойства | Вид курсора |
| default |  |
text |  |
| pointer |  |
| help |  |
| move |  |
| nw-resize se-resize |
 |
| ne-resize sw-resize |
 |
| e-resize w-resize |
 |
| n-resize s-resize |
 |
| crosshair |  |
| progress |  |
| wait |  |
Как Вы можете видеть, для некоторых видов указателя мыши существуют по два значения. Использовать можно любое. В некоторых браузерах эти курсоры выглядят по-другому, и тогда значения могут отличаться.
Кроме того, есть такие значения:
cursor: auto — указатель мыши будет такой, какой и должен быть
cursor: inherit — значение принимается от родительского элемента
Кроме названных значений существуют и другие, но они поддерживаются не всеми браузерами.
Создадим блок и установим для него вид указателя мыши — pointer . Это делают, чтобы показать пользователю, что на этот элемент можно нажать.
Запустите страницу, наведите указатель мыши на блок и курсор получит вид, который для него установлен.
В качестве указателя мыши можно использовать картинку. Для этого в свойстве cursor нужно указать путь к файлу изображения. Каждый браузер поддерживает свой набор форматов для курсора. Самый распространённый формат — cur. Он работает в большинстве браузеров. Можно указать несколько файлов через запятую. Если первый файл не поддерживается, то будет использован второй. Если и он не может применяться, то берётся третий, и так далее. Также желательно указать стандартный вид курсора. Он используется, если ни один из файлов не подойдёт.
Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.
Добавим ещё один блок и используем эту картинку для курсора.
Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.
Коприрование материалов сайта возможно только с согласия администрации