cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
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 |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
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.getElementById(" 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.
Изменяем курсор мыши с помощью правила 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 поддерживает все значения.
С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI. А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.
При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:
cursor: url ('адрес картинки 1'), url ('адрес картинки 2'), . <ключевое слово>
При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:
<p style=»cursor:url ('//webcodius.ru/images/cursor.cur'), pointer;»>текст абзаца</p>
Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.
На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:
Как изменить форму курсора мыши на сайте с помощью CSS
В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor» .
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:
Все значения находятся в табличке снизу:
Итак, вначале нужно создать в CSS класс со свойством «cursor» :
В HTML вывести класс:
Давайте я сейчас сделаю один примерчик.
Вот готовый рабочий код:
Собственный курсор-картинка на css
Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку . Скачайте курсор мышки с интернета в формате «CUR» , их там куча.
Вот так выглядит шаблон для изменения вида курсора-картинки в CSS:
стандартный курсор – сюда вставляется значение из таблицы курсоров (смотрите таблицу выше).
Вот готовый код:
Как изменить курсор на сайте на свой собственный?
Изменить курсор в приложении на свой
Здравствуйте, подскажите как заменить стандартный курсор в форме на свой и чтобы он был таким.
Как выбрать свой собственный НИК
1. Самый Простой Способ (случайный) Поставьте клавиатуру прямо перед собой. Определитесь.
Как создать свой собственный тип на C++?
Здравствуйте. Возник вопрос как создать свой собственный тип на С++ который включат такие типы.
Как поменять курсор мыши на собственный(формат jpg,png)?
Как поменять курсор мыши на собственный(формат jpg,png)? Пишу программу,форм будет 50,надо чтоб во.
Сообщение от Vanstorm
Как создать свой собственный стиль таблицы
Братцы, как создать свой собственный стиль таблицы, чтобы нажать при его применении менялся шрифт и.
Как сделать свой собственный сайт-форум?
Всем привет. Кто-нибудь может подсказать как по-быстрому сделать простенький сайт-форум (типа.
Как назначить событию свой собственный обработчик?
Использую компонент TAdvStringGrid (из набора компонентов TMS). У него есть событие OnDblClickCell.
NRPE как сформировать свой собственный пакет
Возникла проблема при посылке пакета, содержащий команду, для nscliet++(nagios). Я читал исходники.
Как в Word создать свой собственный стиль оглавления?
Доброго времени суток форумчане, подскажите кто знает как в word создать свой собственный стиль.
Как сделать свой собственный порядок папок в IntelliJ IDEA
Приветствую уважаемые форумчане. Вопрос по IDEA. Вот например у меня в IntelliJ IDEA в проекте.