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

Описание

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

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

Синтаксис

Значения

Остальные допустимые значения приведены в табл. 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

Значение свойства	Вид курсора
default
text
pointer
help
move
nw-resize se-resize
ne-resize sw-resize
e-resize w-resize
n-resize s-resize
crosshair
progress
wait

Для некоторых видов указателя мыши существуют по два значения. Использовать можно любое. В некоторых браузерах эти курсоры выглядят по-разному.

Кроме того, есть такие значения:

Кроме названных значений существуют и другие, но они поддерживаются не всеми браузерами.

Курсор в виде картинки

Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.

Добавим ещё один блок и используем эту картинку для курсора.

Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.

Коприрование материалов сайта возможно только с согласия администрации

Источник

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

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

Источник

Курсор

Курсо́р (англ. cursor — указатель, стрелка прибора) — экранная пометка, показывающая:

Содержание

Текстовый курсор

Текстовый курсор применяется в интерфейсе командной строки и/или областях редактирования текста, показывая место, куда будет вставлен следующий символ (например, символ, набранный с клавиатуры), или место текста, в котором происходит редактирование в настоящий момент. На самом деле называется кареткой.

В большинстве командных оболочек для перемещения курсора по экрану (или тексту), применяются клавиши управления курсором — клавиши со стрелками в четырёх направлениях, а также клавиши Home и End для перемещения в логические начало и конец (строки), PageUp и PageDown для перемещения на логическую страницу вверх (назад) и вниз (вперед) и др. Однако, в отдельных программах, например, редакторе vi, перемещение курсора производится клавишами, отличными от курсорных.

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

Внешний вид курсора может зависеть от режима работы (текстовый или графический), применяемой программы и текущих режимов редактирования.

Текстовый режим

В текстовом режиме (или его эмуляции) курсор имеет вид горизонтальной чёрточки под знакоместом, или прямоугольника покрывающего все знакоместо (инвертирующего отображение символа или закрывающего его). Для удобства, курсор обычно выделяется мерцанием, яркостью или цветом.

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

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

Программы также могут создавать курсор самостоятельно (программно), атрибутами знакоместа — цветом символа и фона (например, инверсией — обменом их значениями), подчёркиванием и т. п.

Графический режим

В графическом режиме, за исключением случаев эмуляции текстового режима, из-за применения пропорциональных шрифтов (то есть, шрифтов с разной шириной символов) курсор отображается вертикальной чёрточкой (или символом вставки) между буквами. Как правило он мигает для удобства его нахождения (зрительный анализатор человека находит подвижные объекты быстрее), но может и не мигать.

Указатель

Указатель (иногда, в частном случае — курсор мыши) — (обычно отображается в виде стрелки) перемещается по экрану, повторяя движения мыши или другого указательного манипулятора (например джойстика или пера графического планшета). Нажатие кнопок и другие действия мыши применяются к текущему положению указателя. Например:

Внешний вид указателя обычно меняется в зависимости от:

В текстовом режиме курсор мыши, как правило, отображается изменёнными атрибутами знакоместа (например сменой цветов фона и символа на дополнительные). Некоторые программы способны отображать графический курсор в текстовом режиме динамическим изменением фонта в видеоадаптере.

Задание формы курсора при навигации по HTML-документу посредством CSS

Форму курсора при навигации по HTML-документу можно задать посредством свойства cursor каскадных таблиц стилей CSS.

Синтаксис применения этого свойства: [1]

Источник