cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Краткая информация
| Значение по умолчанию | auto |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Остальные допустимые значения приведены в табл. 1. Чтобы увидеть как курсор выглядит в реальности, наведите на колонку Тест.
В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor
| 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 |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#cursor-props |
Версии CSS
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
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.
| Вид | Значение | Тест | Пример |
|---|---|---|---|
 | default | P | |
 | crosshair | P | |
 | help | P | |
 | move | P | |
 | pointer | P | |
 | progress | P | |
 | text | P | |
 | wait | P | |
 | n-resize | P | |
 | ne-resize | P | |
 | e-resize | P | |
 | se-resize | P | |
 | s-resize | P | |
 | sw-resize | P | |
 | w-resize | P | |
 | nw-resize | P |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.cursor
Браузеры
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
cursor pointer что это
| 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 |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/ui.html#cursor-props |
Версии CSS
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
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.
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
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 в качестве формата файла курсора поддерживает 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 | Вопросительный знак или воздушный шар, идеально подходит для использования через кнопки справки. |
| Источник файла изображения курсора. |
ПРИМЕЧАНИЕ. Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в местах они ожидали бы увидеть этот курсор. Например, использование перекрестия, когда кто-то наводит курсор на ссылку, может смутить посетителей.
Это приведет к следующему результату, наведите курсор мыши на слова, чтобы увидеть изменение курсора.
| Значение свойства | Вид курсора |
| 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 — значение принимается от родительского элемента
Кроме названных значений существуют и другие, но они поддерживаются не всеми браузерами.
Запустите страницу, наведите указатель мыши на блок и курсор получит вид, который для него установлен.
В качестве указателя мыши можно использовать картинку. Для этого в свойстве cursor нужно указать путь к файлу изображения. Каждый браузер поддерживает свой набор форматов для курсора. Самый распространённый формат — cur. Он работает в большинстве браузеров. Можно указать несколько файлов через запятую. Если первый файл не поддерживается, то будет использован второй. Если и он не может применяться, то берётся третий, и так далее. Также желательно указать стандартный вид курсора. Он используется, если ни один из файлов не подойдёт.
Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.
Добавим ещё один блок и используем эту картинку для курсора.
Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.
Коприрование материалов сайта возможно только с согласия администрации
Курсоры в CSS
За вид курсора отвечает CSS свойство « cursor ». Им можно задать вид из предопределённых названий курсоров, так и вывести курсор из файла.
Стандартные курсоры
Вид курсора можно задать с помощью значения – названия, например курсор со знаком вопроса:
Полный список значений cursor
| Значение | Windows | MacOS | Описание |
|---|---|---|---|
| auto | Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента | ||
| default |  |  | Основной курсор |
| none | – | – | Курсор не отображается |
| context-menu |  |  | Доступно контекстное меню |
| help |  |  | Доступна вспомогательная информация |
| pointer |  |  | Указатель, обозначающий ссылку |
| progress |  |  | Программа занята, но пользователь может взаимодействовать с интерфейсом |
| wait |  |  | Программа занята |
| cell |  |  | Указывает на возможность выбора клетки таблицы |
| crosshair |  |  | Крестик, часто используемый для обозначения выбора на битовой карте |
| text |  |  | Значок выбора текста |
| vertical-text |  |  | Значок выбора вертикального текста |
| alias |  |  | Будет создана ссылка внутри страницы |
| copy |  |  | Указывает на возможность копирования |
| move |  |  | Указывает на возможность перемещения объекта |
| no-drop |  |  | Указывает на невозможность «сбрасывания» объекта |
| not-allowed |  |  | Указатель невозможности выполнения действия |
| all-scroll |  |  | Указатель возможности перемещения по странице в любом направлении |
| col-resize |  |  | Объект может быть раздвинут/сдвинут горизонтально |
| row-resize |  |  | Объект может быть раздвинут/сдвинут вертикально |
| n-resize |  |  | Грань, которая может быть перемещена |
| e-resize |  |  | |
| s-resize |  |  | |
| w-resize |  |  | |
| ne-resize |  |  | |
| nw-resize |  |  | |
| se-resize |  |  | |
| sw-resize |  |  | |
| ew-resize |  |  | Двунаправленное изменение размера |
| ns-resize |  |  | |
| nesw-resize |  |  | |
| nwse-resize |  |  | |
| zoom-in |  |  | Приближение или уменьшение |
| zoom-out |  |  | |
| grab |  |  | Указывает на возможность схватить и переместить объект |
| grabbing |  |  |
Установка своего курсора
Все браузеры дают возможность установить элементу свой курсор из файла по URL, например:
Вторым параметром задаются координаты активной точки, в которой регистрируется нажатие мыши. По умолчанию это левый верхний угол (0,0).
Изменяем курсор мыши с помощью правила CSS Cursor
Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи css. В операционной системе вашего компьютера предусмотрено несколько возможных вариантов курсора мыши в зависимости от совершаемых действий. Курсор может приобретать вид различных стрелок, руки, перекрестья, песочных часов и т.п.
Такие же образы может приобретать курсор мыши и при работе в браузере при просмотре различных веб страниц. Это возможно благодаря каскадным таблицам стилей, которые предоставляют нам такую замечательную возможность как изменение курсора мыши при наведении его на элементы html страницы.
Курсор мыши можно поменять с помощью правила css cursor, которое позволяет установить форму курсора мыши при наведении его на данный элемент веб-страницы. Этот атрибут можно применять к любому элементу веб страницы, будь это строчный или блочный элемент.
Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:
Большинство значений на практике применяется довольно редко. По умолчанию для свойста cursor применяется значение auto. В этом случае браузер отображает курсор по умолчанию для текущего элемента. Например, при наведении на ссылку курсор приобретает форму руки, в тексте показывается обычный текстовый курсор, а на пустых местах простая стрелочка.
Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.
| Значение | Вид | Пример |
|---|---|---|
| default |  | P |
| none | P | |
| context-menu | | P |
| help |  | P |
| pointer |  | P |
| progress |  | P |
| wait |  | P |
| cell |  | P |
| crosshair |  | P |
| text |  | P |
| vertical-text |  | P |
| alias |  | P |
| copy |  | P |
| move |  | P |
| no-drop |  | P |
| not-allowed | | P |
| e-resize |  | P |
| n-resize |  | P |
| ne-resize |  | P |
| nw-resize |  | P |
| s-resize | | P |
| se-resize | | P |
| sw-resize | | P |
| w-resize | | P |
| ew-resize | | P |
| ns-resize | | P |
| nesw-resize | | P |
| nwse-resize | | P |
| col-resize |  | P |
| row-resize |  | P |
| all-scroll |  | P |
Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер Internet Explorer поддерживает все значения.
При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:
При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:
Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.
На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей: