Css pointer: Курсор — CSS | MDN — Программирование на Python и Objective-C в Mac OS

Содержание

CSS — pointer — В pointer CSS медиа имеют тесты , имеет ли пользователь указывающее устройство (

В pointer CSS медиа имеют тесты , имеет ли пользователь указывающее устройство (например, мышь), и если да, то насколько точные первичное указательное устройство.

Примечание. Если вы хотите проверить точность любого указывающего устройства, используйте вместо него any-pointer .

Syntax

Функция pointer указывается в качестве значения ключевого слова, выбранного из списка ниже.

none: Основной механизм ввода не включает в себя указательное устройство.
coarse: Механизм первичного ввода включает в себя устройство наведения с ограниченной точностью.
fine: Механизм первичного ввода включает в себя устройство точного наведения.

Examples

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

HTML

<input type="checkbox" />
<label for="test">Look at me!</label>

CSS

input[type="checkbox"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

Result

Specifications

Совместимость с браузерами

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Хромовый Android	Firefox для Android	Опера Андроид	Safari на IOS	Samsung Интернет
`pointer`	41	12	64	No	28	9	41	50	64	28	9	5.0

См.также

CSS свойство pointer-events

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

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

Это значение и рассмотрено в этой заметке

Синтаксис

pointer-events: auto;
pointer-events: none;
/* только SVG */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: all;
/* Глобальные значения */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

pointer-events: auto;

pointer-events: none;

/* только SVG */

pointer-events: visiblePainted;

pointer-events: visibleFill;

pointer-events: visibleStroke;

pointer-events: visible;

pointer-events: painted;

pointer-events: fill;

pointer-events: stroke;

pointer-events: all;

/* Глобальные значения */

pointer-events: inherit;

pointer-events: initial;

pointer-events: unset;

Использование значения

none

1. Наложение полупрозрачных элементов

Используя pointer-events: none; можно легко накладывать любые полупрозрачные элементы с нестатичным позиционированием, не боясь, что они перекроют ссылки и другие рабочие области.

Нажмите на кнопку, чтобы наложить такие слои поверх всей страницы:

наложить

убрать

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

2. Запрет взаимодействия с изображениями

По умолчанию картинки можно сохранять, перетаскивать мышкой и т.д. pointer-events: none; сделает их невидимыми для нее.

3. Сокрытие каких-либо кликабельных элементов другой информацией

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

Практическое применение CSS свойства pointer-events » POSITIVECRASH.COM

Что такое pointer-events

CSS свойство pointer-events было опубликовано в CSS4-UI в качестве дополнения к CSS3 свойствам.
W3C.org заявляет в спецификации:

The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go “through” an element and target whatever is “underneath” that element instead. This also applies to other “hit testing” behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint()

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

pointer-events: none предотвращает события указателя (как правило, мыши) для элемента: hover, active, click и т.п., в том числе и JavaScript событие click.

pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом.

Есть и другие значения свойства pointer-events, но они используются только при работе с SVG и я их не буду здесь рассматривать.

Небольшая особенность pointer-events, которую обязательно нужно учитывать

Предположим, вы установили для элемента JavaScript отслеживание события click. Затем выставили для него свойство pointer-events: none, а после этого опять поменяли этому элементу значение свойства pointer-events на auto. Тогда JavaScript, вызываемый при событии onclick, будет вызван опять при изменении значения свойства pointer-events на auto.

Кроссбраузерность pointer-events

Pointer-events, на удивление, поддерживается многими версиями браузеров. Но всё же подобные свойства нужно использовать аккуратно, чтобы не лишать пользователей возможности пользоваться основными функциями web приложения в старых версиях браузеров.

Так как же использовать pointer-events без вреда для кроссбраузерности? Можно воспользоваться Modernizr библиотекой для определения поддержки браузера этого свойства. А можно принять во внимание, что по сути подобная проблема возникнет в старой версии IE (так как другие браузеры обычно автоматически обновляются) и воспользоваться условными комментариями, если это возможно (пример 3).

Применение CSS свойства pointer-events на практике

Применений pointer-events в верстке можно найти в принципе столько, насколько у верстальщика хватит фантазии и потребностей. Есть парочка применений, которые и мне кажутся полезными. Напишу о них подробнее.

1. Предотвращение взаимодействия с изображениями

Если, к примеру, вы не хотите, чтобы у пользователя была возможность кликнуть правой кнопкой мыши по размещенному на сайте фото, то вы можете воспользоваться свойством pointer-event. Спасет ли это от незаконного копирования? Вряд ли…но жизнь воришке слегка подпортит.

See the Pen zKDev by Anastasiia Bakai (@positivecrash) on CodePen.

Правой картинке задано как раз свойство pointer-events. Попробуйте на практике покликать.

2. Ускорения скролла

Давненько уже было описано, что скролл – тяжелая процедура, при которой перерисовывается контент. Там же написано, что события для элемента такие, как hover, click и т.п. так же требуют перерисовки элементов, соответственно замедляют работу браузера. На хабре был предложен метод, который позволяет уменьшить подобную нагрузку на браузер как раз с помощью свойства pointer-event! Описывать тут метод не буду, в статье все хорошо описано. Способ, надо сказать, заманчивый. И возможно даже не будет никаких казусов в связи с особенностью обработки JavaScript, описанной мною выше.

3. Дизайн-элементы поверх интерактивных карт

Нарисовала я как-то дизайн, в котором ключевым элементом была карта. Сделала скриншот Google карты и наложила на нее пару теней для украшения:

Она понравилась моему начальнику и всё бы ничего..но вот в Illustrator я наложила на карту тени, а в вёрстке как быть? Тут на помощь как раз придёт CSS свойство pointer-events, который позволит наложить декоративные элементы поверх карты, при этом не “закрывая” области интерактивной карты от взаимодействия с пользователем. Как вы уже догадались, я просто добавлю строчку

в CSS к элементам теней. Как быть с IE, который не поддерживает это свойство до 11 версии? В данном случае я просто не стану для пользователей IE показывать эти тени.

4. Другие забавные примеры pointer-event

Пример 4.1: png изображение поверх текста

Пример 4.2: png изображение поверх галереи, презабавнейший эффект

Пример 4.3: очень сложный красивый пример

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши

Обновлено 27 мая 2021 Просмотров: 34514 Автор: Дмитрий Петров

Z-index в CSS — позиционирование по оси Z
Cursor — изменяем внешний вид курсора мыши

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему позиционирования Html тегов с помощью языка CSS в современной верстке сайтов. На очереди у нас правило z-index, которое позволяет задавать порядок расположения тэгов, для которых значение position отлично от умолчательного (static).

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

Z-index в CSS — позиционирование по оси Z

Итак, для всех элементов, которые были насильно спозиционированы (для них мы специально прописали position со значением relative, absolute или fixed), у нас появляется возможность управлять расположением этих элементов друг относительно друга на оси Z. Эта ось направлена от экрана компьютера к вашим глазам (или глазам посетителей сайтов).

Две другие оси, X и Y, имеют начальную точку отсчета в правом верхнем углу экрана (для тех, кто пишет слева направо) или в левом верхнем углу (для тех, кто пишет набором — арабы, например). Естественно, что точкой отсчета на оси Z является ноль. Именно в ней и располагаются все статичные элементы Html кода (для которых значение position не прописано, а значит браузер его интерпретирует как static).

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

А вот если у тега прописано значение для position — relative, absolute или fixed, то они будут автоматически располагаться выше (ближе к нашим глазам) по отношению ко всем статическим. Спозиционированные тэги ведь можно двигать с помощью CSS правил Left, right, top и bottom, а значит они должны быть априори расположены выше (ближе к нам) относительно всей остальной статики на веб-странице.

Т.о. все спозиционированные элементы на оси Z автоматически сдвигаются вперед относительно всех статичных. Относительно же друг друга они подчиняются все тому же правилу — элемент находящийся ниже в коде веб страницы будет расположен ближе к нашим глазам. Но положением на оси Z у таких тегов (с position — relative, absolute или fixed) можно будет играться по своему разумению с помощью правила z-index.

Для статичных же тэгов (с «position: static» используемым по умолчанию) правило z-index работать не будет. В этом заключается его специфика. По умолчанию оно имеет значение Auto или тоже самое, что ноль (действие которого мы подробно рассмотрели чуть выше):

Но также в качестве значения для z-index можно использовать положительные и отрицательные цифры.

Давайте все рассмотрим его работу на простом примере. Пусть у нас имеется один большой контейнер Div с текстом (контентом) и относительным позиционированием (position:relative), а внутри него заключены два других Div с фиксированным размером и абсолютным позиционированием (position:absolute относительно левого верхнего угла внешнего контейнера):

<div>
		<div></div>
		<div></div>
		текст или же контент внешнего контейнера
	</div>

Внутренним контейнерам я задал сдвиги и фоновые цвета для пущей наглядности. Почему на оси Z эти элементы расположились именно в таком порядке? Очевидно, что подчиняясь умолчательному правилу — чем ниже тег в коде, тем ближе он к нашим глазам. Ну, а теперь давайте применим, наконец-то, правило z-index и посмотрим, что из этого получится.

По умолчанию оно имеет значение ноль, поэтому прописав для красного блока z-index:1, мы выдвинем его на первый план:

		<div></div>

Все довольно просто и понятно. Единица обозначает число на оси Z (первый уровень после нуля). Если мы теперь захотим, чтобы фиолетовый блок опять выдвинулся вперед красного, то можно будет ему прописать z-index:2 и мы получим картину аналогичную той, что отображена на первом скриншоте. Получается, что выше всех (ближе к нашим глазам) будет расположен тот тэг, у которого больше значение этого CSS правила.

Если оно окажется у спозиционированных элементов одинаковым, то выше будет стоять тот элемент, который в коде веб-страницы расположен ниже. И как я уже упоминал чуть выше, значение для него может быть использовано со знаком минус (быть отрицательным). Давайте пропишем z-index:-1 для красного блока и посмотрим что из этого получится:

		<div></div>

Думаю, что комментарии здесь излишни. Таким образом z-index позволяет перемещать элементы кода по оси Z, чтобы он был виден или же, наоборот, не виден. Но все это великолепие будет работать только для спозиционирванных тегов, а для статичных (с position: static) уже работать не будет. Это нужно помнить и учитывать.

Cursor — изменяем внешний вид курсора мыши

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

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

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

Если опираться на спецификацию CSS с кладбища стандартов всемирной паутины WWW, то значений у Cursor может быть очень много:

Как я уже говорил, по умолчанию для него используется Auto. Ну, а все остальные значения для Cursor вы можете увидеть на приведенном ниже примере (подводите курсор мыши к разным строкам и смотрите как изменится его вид:

cursor: auto
default
pointer
crosshair
text
wait
help
move
e-resize
ne-resize
nw-resize;»
n-resize
se-resize
sw-resize
s-resize
w-resize
progress
ol-resize;»
not-allowed
row-resize
vertical-text
cursor: url (https://ktonanovenkogo.ru/image/cursor.cur), cursor_type
all-scroll
no-drop

В нижней части расположены значения для Cursor, которые в некоторых браузерах могут игнорироваться. Обычно проблемы возникают в Опере, реже в Mozilla Firefox и браузерах на движке Webkit — Google Chrome, Яндекс браузере, а также Сафари для Виндовс), ну и вообще не возникает в Интернет Эксплорере.

Естественно, что виды курсоров будут зависеть и от используемой вами темы ОС или же наборов курсоров в ней. Стоит отдельно отметить вариант, где вы сами можете указать путь до нужной вам картинки, которая обычно имеет расширение .cur, а через запятую нужно будет указать одно из обычных значений, например, так:

url(https://ktonanovenkogo.ru/image/cursor.cur), crosshair;

Есть много программ, которые умеют рисовать курсоры. Но имеет смысл активно применять CSS правило Cursor только тогда, когда у вас будут на сайте какие-то динамические интерфейсы. На обычных страницах лучше не злоупотреблять их разнообразием, дабы не вводить пользователя в прострацию.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

css — Как совместить курсор: недопустимые и события-указатели: нет;

css — Как совместить курсор: недопустимые и события-указатели: нет; — Переполнение стека

Спросил
4 года назад

Просмотрено
41k раз

На этот вопрос уже есть ответы здесь :

Закрыт 3 года назад.

Как комбинировать CSS cursor: not-allowed и pointer-events: none;
не разрешено, кажется, не появляется

  .cursor-default {курсор: по умолчанию; }
.cursor-not-allowed {курсор: not-allowed; }
.pointer-events-none {события-указателя: нет; }

Маленький образец, пожалуйста, посмотрите на четвертую кнопку
cursor: not-allowed не смотрел на кнопку, но отображал просмотренный значок.

Педрам

13.5k77 золотых знаков3535 серебряных знаков6767 бронзовых знаков

Создан 10 окт.

, вы не можете этого сделать, потому что событий-указателей: нет; отключить все функции мыши, но вы можете сделать трюк и обернуть кнопку div , а затем использовать cursor: not-allowed; по этому поводу.

  .pointer-events-none {
    указатель-события: нет;
}

.wrapper {
    курсор: не допускается;
}

Добавить свойство курсора CSS при использовании «события-указателя: нет»

Создан 10 окт.

Педрам

13.5k77 золотых знаков3535 серебряных знаков6767 бронзовых знаков

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

twitter bootstrap — класс CSS для курсора-указателя

twitter bootstrap — класс CSS для курсора-указателя — qaru

Спросил
3 года, 11 месяцев назад

Просмотрено
331k раз

Есть ли какой-либо класс или атрибут CSS для указателя : курсор в Bootstrap 4 специально для кнопки или ссылки?

Создан 13 ноя.

w411 3w411 3

1,70311 золотых знаков1616 серебряных знаков1818 бронзовых знаков

ОБНОВЛЕНИЕ для Bootstrap 4 стабильной

Курсор : указатель; Правило было восстановлено, поэтому кнопки теперь по умолчанию будут иметь курсор при наведении:

Нет, нет. Для этого вам нужно создать собственный CSS.

Если вам просто нужна ссылка, которая выглядит как кнопка (с указателем), используйте это:

  
 Образец кнопки

Близнец

3,02611 золотых знаков1616 серебряных знаков3030 бронзовых знаков

Создан 13 ноя.

Кловен

3,65711 золотых знаков2121 серебряный знак3838 бронзовых знаков

К сожалению, на данный момент (27 января 2019 г.) в Bootstrap нет такого класса.

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

  сводка {
  отображение: элемент списка;
  курсор: указатель;
}
.btn: not (: disabled): not (.disabled) {
  курсор: указатель;
}
.custom-range :: - webkit-slider-runnable-track {
  ширина: 100%;
  высота: 0,5 бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: # dee2e6;
  цвет границы: прозрачный;
  радиус границы: 1 бэр;
}
.custom-range :: - moz-range-track {
  ширина: 100%;
  высота: 0,5 бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: # dee2e6;
  цвет границы: прозрачный;
  радиус границы: 1 бэр;
}
.custom-range :: - ms-track {
  ширина: 100%;
  высота: 0,5 бэр;
  цвет: прозрачный;
  курсор: указатель;
  цвет фона: прозрачный;
  цвет границы: прозрачный;
  ширина границы: 0,5 бэр;
}
.navbar-toggler: not (: disabled): not (.disabled) {
  курсор: указатель;
}
.page-link: not (: disabled): not (.disabled) {
  курсор: указатель;
}
.close: not (: disabled): not (.disabled) {
  курсор: указатель;
}
.carousel-sizes li {
  размер коробки: коробка содержимого;
  -ms-flex: 0 1 авто;
  flex: 0 1 авто;
  ширина: 30 пикселей;
  высота: 3 пикселя;
  маржа справа: 3 пикселя;
  маржа слева: 3 пикселя;
  текстовый отступ: -999px;
  курсор: указатель;
  цвет фона: #fff;
  фоновый клип: padding-box;
  border-top: сплошная прозрачная 10 пикселей;
  нижняя граница: сплошная прозрачная 10 пикселей;
  непрозрачность: .5;
  переход: непрозрачность 0,6 с легкость;
}

ЕДИНСТВЕННОЕ ЯВНОЕ РЕШЕНИЕ:

Я бы посоветовал вам просто создать класс в вашем общем CSS как курсор-указатель .На данный момент это просто и элегантно.

  .cursor-pointer {
  курсор: указатель;
}

   Наведите на меня

Создан 27 янв.

Хари ДашХари Дас

8,191 22 золотых знака

Я обычно просто добавляю следующий пользовательский CSS, пример W3School с добавлением курсора -

 .курсор-псевдоним {курсор: псевдоним;}
.cursor-all-scroll {курсор: all-scroll;}
.cursor-auto {курсор: авто;}
.cursor-cell {курсор: ячейка;}
.cursor-context-menu {курсор: контекстное-меню;}
.cursor-col-resize {курсор: col-resize;}
.cursor-copy {курсор: копия;}
.cursor-crosshair {курсор: перекрестие;}
.cursor-default {курсор: по умолчанию;}
.cursor-e-resize {курсор: e-resize;}
.cursor-ew-resize {курсор: ew-resize;}
.cursor-grab {курсор: -webkit-grab; курсор: захват;}
.захват курсора {курсор: -вебкит-захват; курсор: захват;}
.cursor-help {курсор: help;}
.cursor-move {курсор: перемещение;}
.cursor-n-resize {курсор: n-resize;}
.cursor-ne-resize {курсор: ne-resize;}
.cursor-nesw-resize {курсор: nesw-resize;}
.cursor-ns-resize {курсор: ns-resize;}
.cursor-nw-resize {курсор: nw-resize;}
.cursor-nwse-resize {курсор: nwse-resize;}
.cursor-no-drop {курсор: no-drop;}
.cursor-none {курсор: нет;}
.cursor-not-allowed {курсор: not-allowed;}
.курсор-указатель {курсор: указатель;}
.cursor-progress {курсор: прогресс;}
.cursor-row-resize {курсор: row-resize;}
.cursor-s-resize {курсор: s-resize;}
.cursor-se-resize {курсор: se-resize;}
.cursor-sw-resize {курсор: sw-resize;}
.cursor-text {курсор: текст;}
.cursor-w-resize {курсор: w-resize;}
.cursor-wait {курсор: ждать;}
.cursor-zoom-in {курсор: приближение;}
.cursor-zoom-out {cursor: zoom-out;}

Создан 05 сен.

Алексис Пакес

1,9751313 серебряных знаков2626 бронзовых знаков

Вы можете назначить «кнопку» атрибуту роли любого тега / элемента html, чтобы навести на него указатель.т.е.

Создан 29 дек.

Афзал АлиАфзал Али

33722 серебряных знака1111 бронзовых знаков

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

Лучшее, что вы можете сделать, как предложил Хари Дас, и что я всегда делаю, — это добавить следующий css:

  .cursor-pointer {
  курсор: указатель;
}

После чего вы можете добавить его к любому элементу

..

Создан 15 июн.

РикРик

14122 серебряных знака 77 бронзовых знаков

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

Пример:

   При наведении указателя мыши курсор мыши должен быть установлен в положение руки или указателя!

Ура!

Создан 28 июн.

Bootstrap 3 — у меня сработало только добавление класса « btn ».

Без указателя курсора:

   текст

С указателем курсора :

   текст

Создан 17 ноя.

Для этого нет классов.Но вы можете добавить встроенный стиль для своего div или других элементов
вроде,

Создан 31 янв.

Не знаю, когда добавили, но согласно его документу есть btn-link

  

  
    
    
    

    
     Привет, мир!

Ссылка

https://getbootstrap.com/docs/4.0/components/buttons/

btn-ссылка

ответ дан 31 мар в 18:32

Давут Гюрбюз

4,76244 золотых знака

по умолчанию

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Принимать все файлы cookie

Настроить параметры

указателей событий — Codrops

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

Обратите внимание, что это свойство SVG, которое не определено ни в одной спецификации CSS.

Свойство pointer-events может иметь много значений, применимых к элементам SVG, но только три из этих значений применимы к элементам HTML.

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

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

Свойство pointer-events может быть очень полезным в различных сценариях. Одним из преимуществ этого свойства является возможность создания прокрутки со скоростью 60 кадров в секунду с использованием событий-указателей : нет . Райан Седдон написал подробную статью о том, как это работает; его статью стоит прочитать.

Общая информация и заметки

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

Как упоминалось выше, свойство pointer-events является свойством SVG. Несмотря на то, что он присутствовал в ранних версиях модуля пользовательского интерфейса уровня 3, он был удален из этого модуля и переведен на уровень 4.Подробнее об этом здесь.

Официальный синтаксис

Синтаксис: Формальный синтаксис:

указатель-события: visiblePainted | visibleFill | visibleStroke | видимый |
окрашены | заполнить | инсульт | все | нет | наследовать

Значения в официальном синтаксисе применимы к элементам SVG. Из этих значений только они применимы к HTML:

указатель-события: авто | нет | наследовать

Начальный: авто
Применимо к: всем элементам
Анимация: нет

Значения

авто: Значение по умолчанию.События указателя включены. Элемент реагирует на события указателя, блокируя запуск этих событий на элементах под ним.
нет: События указателя отключены для элемента. Элемент не реагирует на события указателя. Элементы под ним могут реагировать на события указателя, как если бы элемент не существовал над ними.
унаследовать: Элемент наследует значение события-указателя от своего родителя.

Банкноты

См. Спецификацию SVG для получения дополнительной информации об остальных значениях.

Примеры

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

.overlay {
    положение: фиксированное;
    верх: 0;
    слева: 0;
    ширина: 100%;
    высота: 100%;
    непрозрачность: 0;
    / * ... * /
    указатель-события: нет;
}

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

Живая демонстрация

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

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

Посмотреть эту демонстрацию на игровой площадке Codrops

Поддержка браузера

* обозначает обязательный префикс.

Поддерживается:
Да
Нет
Частично
Полифилл

Статистика caniuse.com

CSS-события указателя.

  .no-click {
  указатель-события: нет;
}

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

значения только для SVG

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

все : элемент является целевым, когда указатель находится над заливкой или обводкой.
штрих : элемент является целью, когда указатель находится над штрихом.
заливка : элемент является целевым при наведении указателя на заливку.
нарисовано : элемент является целевым, когда указатель находится на заливке или обводке, и для этой заливки или стрижки установлено иное значение, кроме «ничего», независимо от видимости .
видимый : элемент является целевым, когда указатель находится на заливке или обводке, и эта заливка или сток установлены на видимый , независимо от значения заливки или обводки.
visiblePainted : Элемент является целевым, когда указатель находится на заливке или обводке, и для этой заливки или штриховки установлено значение visible и установлено иное значение, кроме «none».
visibleFill : элемент является целевым, когда указатель находится на заливке и для этой заливки установлено значение видимый , независимо от значения заливки.
visibleStroke : элемент является целевым, когда указатель находится на штрихе, и для этого штриха установлено значение visible , независимо от значения штриха.

Поддержка браузера

Могу ли я использовать события-указатели? Данные о поддержке функции указателя событий в основных браузерах от caniuse.com.

Сброс курсора CSS · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Сброс курсора CSS

Этот файл содержит двунаправленный текст Unicode, который может интерпретироваться или компилироваться иначе, чем то, что показано ниже.Для просмотра откройте файл в редакторе, который показывает скрытые символы Юникода. Подробнее о двунаправленных символах Юникода

	html,
	кузов {
	курсор: по умолчанию;
	}

	код {
	курсор: текст;
	}

	/ *
	textarea и input [type = «text»] уже получают
	«курсор: текст» через базовые таблицы стилей браузеров
	* /

	а,
	этикетка,
	кнопка,
	ввод [type = «radio»],
	input [type = «submit»],
	ввод [type = «checkbox»] {
	курсор: указатель;
	}

	кнопка [отключена],
	вход [отключен] {
	курсор: по умолчанию;
	}

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

Свойство курсора CSS — GeeksforGeeks

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

Синтаксис:

 курсор: значение;

Значения свойств:

auto: Это свойство по умолчанию, в котором браузер устанавливает курсор.
псевдоним: Это свойство используется для отображения указателя курсора на создание чего-либо.
all-scroll: В этом свойстве курсор указывает на прокрутку.
ячейка: В этом свойстве курсор указывает, что ячейка или набор ячеек выбраны.
context-menu: В этом свойстве курсор указывает, что доступно контекстное меню.
col-resize: В этом свойстве курсор указывает, что размер столбца можно изменять по горизонтали.
копия: В этом свойстве курсор указывает на то, что нужно скопировать.
crosshair: В этом свойстве курсор отображается как перекрестие.
по умолчанию: Курсор по умолчанию.
e-resize: В этом свойстве курсор указывает, что край рамки должен быть перемещен вправо.
ew-resize: В этом свойстве курсор указывает двунаправленный курсор изменения размера.
справка: В этом свойстве курсор указывает, что справка доступна.
move: В этом свойстве курсор указывает, что что-то нужно переместить.
n-resize: В этом свойстве курсор указывает край рамки, который нужно переместить вверх.
ne-resize: В этом свойстве курсор указывает край рамки, который нужно переместить вверх и вправо.
nesw-resize: Это свойство указывает двунаправленный курсор изменения размера.
ns-resize: Это свойство указывает на двунаправленный курсор изменения размера.
nw-resize: В этом свойстве курсор указывает край рамки, который нужно переместить вверх и влево.
nwse-resize: Это свойство указывает на двунаправленный курсор изменения размера.
no-drop: В этом свойстве курсор указывает, что перетаскиваемый элемент не может быть здесь отброшен.
нет: Это свойство указывает, что для элемента не отображается курсор.
not-allowed: В этом свойстве курсор указывает, что запрошенное действие не будет выполнено.
указатель: В этом свойстве курсор является указателем и указывает ссылку
прогресс: В этом свойстве курсор указывает, что программа занята.
row-resize: В этом свойстве курсор указывает, что размер строки можно изменять по вертикали.
s-resize: В этом свойстве курсор указывает край рамки, который нужно переместить вниз.
se-resize: В этом свойстве курсор указывает, что край рамки должен быть перемещен вниз и вправо.
sw-resize: В этом свойстве курсор указывает край рамки, который нужно переместить вниз и влево.
текст: В этом свойстве курсор указывает текст, который можно выбрать.
URL: В этом свойстве разделенный запятыми список URL-адресов пользовательских курсоров и общий курсор в конце списка.
vertical-text: В этом свойстве курсор указывает вертикальный текст, который можно выбрать.
w-resize: В этом свойстве курсор указывает, что край рамки необходимо переместить влево.
wait: В этом свойстве курсор указывает, что программа занята.
увеличение: В этом свойстве курсор указывает, что что-то можно увеличивать.
Уменьшение: В этом свойстве курсор указывает, что что-то можно уменьшить.
initial: Это свойство используется для установки значения по умолчанию.
inherit: Наследует от своего родительского элемента.

Пример: Этот пример иллюстрирует использование свойства курсора, и его значение установлено на wait , что указывает на то, что программа занята.

HTML

< html >

< голова >

> 9000 название >

< стиль >

.ждать {

курсор: ждать;

}

h2 {

цвет: зеленый;

}

стиль >

головка >

< корпус

7>

< центр >

< h2 > GeeksforGeeks h2 >

< p > Мышь над словами для изменения курсора мыши. p >

< p class = «подождите» > подождите p >

центр >

корпус >

html >

100 Выход:

  
   Поддерживаемые браузеры:  
   Google Chrome 1.0 
  Microsoft Edge 12.0 
  Mozilla Firefox 1.0 
  IE 4.0 
  Opera 7.0 
  Safari1.2 
 
 
  Курсор CSS - SPLessons 
 Свойство курсора CSS используется для настройки курсора, когда он перемещается над элементом. У которых есть несколько значений, например, по умолчанию, указатель, перемещение, прогресс. По умолчанию браузер может отображать курсор по умолчанию. CSS имеет несколько типов курсоров для различных целей, например, щелкающий или редактируемый курсор для любого текстового поля, курсоры ожидания, курсоры перемещения.Пользователь может переопределить свойства курсора для отображения различных типов курсоров с помощью свойства курсора CSS. Синтаксис для свойства Cursor, как показано ниже. 

  Код ниже демонстрирует, как установить свойство курсора, как показано ниже. 
 


<стиль>
h2 {
курсор: двигаться;
}
п {
курсор: текст;
}



 УЗНАНИЯ 
 Если указатель переместится на SPLESSONS, то курсор изменится.
 

 
  Результат  
 Запустив приведенный выше код в предпочтительном браузере, пользователь может получить следующий результат, как показано на рисунке ниже.
 В таблице ниже показаны некоторые значения свойства курсора, как показано ниже.
 Значение  Описание
 по умолчанию  Которая является стрелой.
 авто  Форма курсора зависит от области контекста, например «I» над текстовой областью, «передать» ссылку и т. Д.
 указатель  Которая показывает указывающую руку.
 прицел  Которая показывает перекрестие или знак плюса.
 переместить  Это полоса «I».
 изменить размер в электронном виде  Это означает, что край прямоугольника движется вправо, то есть на восток.
 изменить размер  Это означает, что край прямоугольника движется вверх, то есть на север.
 изменить размер  Это означает, что край прямоугольника движется вправо i.е север / восток.
 изменить размер nw  Это означает, что край прямоугольника движется влево, то есть на север / запад.
 sw - изменение размера  Это означает, что край прямоугольника движется вниз и влево, то есть на юг / восток.
 изменить размер  Это означает, что край прямоугольника движется вниз и вправо, то есть на юг / запад.
 изменить размер  Это означает, что край прямоугольника движется вниз i.е юг.
 w-изменение размера  Это означает, что край прямоугольника движется влево, то есть на запад.
 подождите  Что означает песочные часы.
 текст  Какой бар.
 справка  Что означает вопросительный знак или баллон.
 Код ниже демонстрирует использование значений курсора, как показано ниже.

   
   <стиль>
     div {семейство шрифтов: Verdana; отступ: 10 пикселей; граница: 5px гребень # 0000ff;
            фон: # E6E6FA; цвет: # 0000ff}
   
   
   
       Наведите указатель мыши на слова, чтобы увидеть изменение курсора: 
       Авто 
       Прицел 
       По умолчанию 
       Указатель 
       Переместить 
       изменить размер 
       изменить размер 
       изменение размера nw 
       n-изменить размер 
       изменить размер 
       sw-resize 
       s-resize 
       w-изменение размера 
       текст 
       подождите 
       справка 
   

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



<стиль>
body, html {
курсор: url ("cursor.png"), по умолчанию;
}



 Пример настраиваемого курсора 

Это содержимое настраиваемого курсора



 
  Результат  
 Запустив приведенный выше код в предпочтительном браузере, пользователь может получить следующий результат, как показано на рисунке ниже.

Значение	Описание
по умолчанию	Которая является стрелой.
авто	Форма курсора зависит от области контекста, например «I» над текстовой областью, «передать» ссылку и т. Д.
указатель	Которая показывает указывающую руку.
прицел	Которая показывает перекрестие или знак плюса.
переместить	Это полоса «I».
изменить размер в электронном виде	Это означает, что край прямоугольника движется вправо, то есть на восток.
изменить размер	Это означает, что край прямоугольника движется вверх, то есть на север.
изменить размер	Это означает, что край прямоугольника движется вправо i.е север / восток.
изменить размер nw	Это означает, что край прямоугольника движется влево, то есть на север / запад.
sw - изменение размера	Это означает, что край прямоугольника движется вниз и влево, то есть на юг / восток.
изменить размер	Это означает, что край прямоугольника движется вниз и вправо, то есть на юг / запад.
изменить размер	Это означает, что край прямоугольника движется вниз i.е юг.
w-изменение размера	Это означает, что край прямоугольника движется влево, то есть на запад.
подождите	Что означает песочные часы.
текст	Какой бар.
справка	Что означает вопросительный знак или баллон.