Создание уникальных выпадающих списков с использованием CSS3
19 февраля 2016 | Опубликовано в css | Нет комментариев »
Спецификация CSS3 определяет свойство pointer-events (события при взаимодействии с указателем) как: «Свойство pointer-events позволяет контролировать, можно ли и при каких условиях взаимодействовать с элементом при помощи указателя, например, мыши. Это свойство используется для задания обстоятельств, при которых событие, создаваемое указателем мыши, будет распространяться сквозь элемент на лежащий под ним элемент. Это также применимо при определении, попадает ли указатель пользователя на определенный элемент, например, для псевдоклассов :hover (при наведении указателя мыши), :active (при нажатии), :focus (при активации элемента), гиперссылок и метода Document.elementFromPoint()».
Это свойство изначально было только у элементов SVG, но со временем браузеры и W3C приняли ограниченную версию и для элементов HTML.
Это свойство можно использовать для создания нужных эффектов, которых иначе было бы очень сложно или невозможно достичь, один из примеров — создание уникальных выпадающих списков с помощью наложения элемента над изначальной стрелкой выпадающего списка для создания уникальной стрелки и запрет отрабатываний событий указателя на ней. Вот пример использования этого свойства:
Свойство -webkit-appearance: none нужно, чтобы движок Webkit не применял свойства по умолчанию для задания внешнего вида. Однако это свойство так же отменяет изначальную стрелку выпадающего списка, и новая уникальная стрелка может заслонять часть текста, так что приходится добавить внутренний отступ справа 30px элементу выбора только для движка Webkit.
Можно легко определить, поддерживается ли свойство pointer-events с помощью кода JS, и применять его, только если оно поддерживается, например, добавляя или удаляя класс элемента:
if(!('pointerEvents' in document.body.style)) { ... }
У библиотеки Modernizer есть более полный скрипт определения поддержки, его код довольно краток, так что его можно переделывать по необходимости.
Не пробуйте создавать поведение этого свойства с помощью JavaScript для браузеров, которые его не поддерживают: невозможно открыть выпадающий список, используя JavaScript. Ну или ни у кого пока что это не получалось.
За дополнительной информацией можно обратиться к следующим источникам:
• статья Mozilla Developer Network
Автор урока Lea Verou
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191