Что такое cursor pointer

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.

Табл. 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.

Источник

Курсоры в 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).

Источник

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

Обозначения

Описание	Пример
Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[, ]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

Остальные допустимые значения приведены в табл. 1. Чтобы увидеть как курсор выглядит в реальности, наведите на колонку Тест.

В зависимости от операционной системы и её настроек вид курсора может отличаться от приведённых в таблице.

При добавлении курсора из файла синтаксис несколько видоизменится.

Источник

CSS cursor позволяет нам устанавливать собственный вид курсора элементам страницы, причем, можно использовать как стандартные виды курсоров, так и курсоры, определенные пользователем (файлы CUR или SVG курсоры).

Как уже говорилось, вид курсора определяется с помощью CSS свойства cursor.

Для простоты разделим курсоры на группы.

Стандартные курсоры

*Проветиде курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор для каждого значения свойства cursor в вашем браузере.

Пример использования: SPAN.help

Курсор определенный пользователем

Может возникнуть ситуация, когда появится необходисомть в курсоре необычного вида. Тогда следует в качестве значения свойства cursor указать:

url(‘путь к курсору’), стандартный курсор

Для наглядности приведу примеры:

Когда браузер встречает определение пользовательского курсора, он пытается отобразить первый курсор из списка. Если первый курсор не может быть отображен, то браузер пытается задействовать следующий по списку курсор. Обратите внимание, что всегда в конце списка пользовательских курсоров указывается какой-то стандартный курсор, на тот случай, если ни один из пользовательских курсоров не сможет быть отображен.

Пользовательские курсоры поддерживаются начиная с IE6, Firefox 1.5. Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI. IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.

На последок

Хочу отдельно отметить, что не стоит увлекаться пользовательскими курсорами, их следует использовать, если на то действительно есть причина. Пользователям привычны и понятны стандартные курсоры, не забывайте об этом.

Источник

Изменяем курсор мыши с помощью правила 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 веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.

На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:

Источник