Властивість pointer-events дозволяє керувати тим, як елементи будуть реагувати на події миші або дотику до сенсорного екрану. Часто застосовується для того, щоб у складній компоновці можна було взаємодіяти з елементами нижче, ігноруючи вищележачі.
Коротка інформація
Значення за замовчуванням
auto
Успадковується
Так
Застосовується
До всіх елементів
Анімується
Ні
>
Синтаксис
<code>pointer-events: auto | none
Позначення
Опис
Приклад
<тип>
Вказує тип значення.
<розмір>
A && B
Значення повинні виводитися в зазначеному порядку.
<розмір> && <колір>
A | B
Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B).
normal | small-caps
A || B
Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку.
width || count
[ ]
Групує значення.
[ crop || cross ]
*
Повторювати нуль або більше разів.
[,<час>]*
+
Повторювати один або більше разів.
<число>+
?
Вказаний тип, слово або група не є обов'язковим.
inset?
{A, B}
Повторювати не менше A, але не більше B разів.
<радіус>{1,4}
#
Повторювати один або більше разів через кому.
<час>#
Значення
auto
Відновлює функціональність елемента за замовчуванням.
none
Запобігає події миші та клацання по елементу.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pointer-events</title> <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"> Абсолютна похибка послідовно виправдовує лист Мебіуса, що, безсумнівно, приведе нас до істини. Якщо припустити, що < b, багаточлен послідовно трансформує нормальний ортогональний визначник.
</div>
</body>
</html>
У цьому прикладі до кожного блоку знизу додається псевдоелемент з градієнтом, що плавно приховує частину тексту. При цьому неможливо виділити частину тексту, оскільки псевдоелемент частково перекриває його. Щоб цей псевдоелемент не заважав роботі з текстом, до нього додаємо властивість pointer-events зі значенням none.
Кожна специфікація проходить кілька стадій схвалення.
Recommendation ( Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
11
12
4
15
4
3.6
2.1
3.6
36
3.2
Браузери
В таблиці браузерів застосовуються такі позначення.
— властивість повністю підтримується браузером з усіма допустимими значеннями;
— властивість браузером не сприймається та ігнорується;
— при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі припустимі акції діють або властивість застосовується не до всіх елементів, які вказані в специфікації.="views-similar-block" class="block">
