cursor

CSS pointer-events Property

Set whether or not an element should react to pointer events:

div.ex2 pointer-events: auto;
>

Definition and Usage

The pointer-events property defines whether or not an element reacts to pointer events.

Default value:	auto
Inherited:	yes
Animatable:	No. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.pointerEvents=»none» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Property Value	Description
auto	The element reacts to pointer events, like :hover and click. This is default
none	The element does not react to pointer events
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

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 ]

Значения

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

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

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

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

       
Обычный текст
 
Ссылка 1 Ссылка 2 Ссылка 3
  

Объектная модель

[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.

Opera не работает с файлами курсора.

Источник

pointer-events¶

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану.

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

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */ /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset; 

Значения¶

auto Восстанавливает функциональность элемента по умолчанию. none Предотвращает события мыши и щелчки по элементу.

Значение по-умолчанию: auto

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

 html> head> meta charset="utf-8" /> title>pointer-eventstitle> style> .panel  background: #50a2de; /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 1em; /* Поля вокруг текста */ width: 16em; /* Ширина */ height: 7em; /* Высота */ border-radius: 10px; /* Радиус уголков */ position: relative; /* Относительное позиционирование */ display: inline-block; /* Располагаем блоки рядом */ margin-right: 2em; /* Отступ справа */ overflow: hidden; /* Скрываем всё, что выходит за пределы блока */ > .panel::before  content: ''; /* Выводим пустой блок */ position: absolute; /* Абсолютное позиционирование */ left: 10px; right: 10px; /* Устанавливает ширину блока */ bottom: 0; /* Положение от нижнего края */ height: 4em; /* Высота */ background: linear-gradient( to bottom, transparent, #50a2de 90% ); pointer-events: none; /* Не реагирует на мышь */ > style> head> body> div class="panel"> В соответствии с законом больших чисел, дифференциальное исчисление непосредственно отображает положительный полином. Умножение двух векторов (векторное), общеизвестно, концентрирует возрастающий вектор. div> div class="panel"> Абсолютная погрешность последовательно оправдывает лист Мёбиуса, что несомненно приведет нас к истине. Если предположить, что a  b, то многочлен последовательно трансформирует нормальный ортогональный определитель. div> body> html> 

Источник

pointer-events

Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Часто применяется для того, чтобы в сложной компоновке можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие.

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

Синтаксис

Синтаксис

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

Значения

auto Восстанавливает функциональность элемента по умолчанию. none Предотвращает события мыши и щелчки по элементу.

Пример

В данном примере к каждому блоку снизу добавляется псевдоэлемент с градиентом, плавно скрывающий часть текста. При этом невозможно выделить часть текста, поскольку псевдоэлемент частично перекрывает его. Чтобы этот псевдоэлемент не мешал работе с текстом, к нему добавляем свойство pointer-events со значением none .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

См. также

Источник