• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Использование css-свойства pointer-events (CSS свойство pointer-events позволяет контролировать события)
Использование css-свойства pointer-events
Kosten
Дата: Четверг, 2019-05-30, 03:49 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


Создание базовых элементов HTML, доступных для клика, используя CSS-свойство pointer-events. Когда мы помещаем элемент HTML над другим элементом, то базовый элемент становится не кликабельным. Мы можем сделать элемент top верхним для обхода событий мыши, это клик, наведение и так далее. И все это на базовом элементе, где задействовано свойство CSS pointer-events.

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

HTML

Код
<div class="box1" onclick="alert('box1 clicked');">
    <div class="box2"></div>
</div>

CSS

Код
.box1
{
    height: 100px;
    width: 100px;
    background-color: yellow;
}

.box2
{
    height: 100px;
    width: 100px;
    background-color: green;
    pointer-events: none;
}

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

Демонстрация
Страна: (RU)
Kosten
Дата: Четверг, 2019-05-30, 04:04 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


Хотя pointer-events свойство принимает одиннадцать возможных значений, все кроме трех, зарезервированы для использования с SVG. Когда pointer-events используется на элементах HTML, он может указывать, может ли элемент реагировать на события мыши.

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

CSS

Код
.avoid-clicks {
  pointer-events: none;
}


See the Pen
CSS-Tricks: pointer-events
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Использование css-свойства pointer-events (CSS свойство pointer-events позволяет контролировать события)
  • Страница 1 из 1
  • 1
Поиск: