Как сделать чтобы div не перекрывал кнопки?

Question

[Александр]

Есть некая страница с элементами управления (кнопки и пр.) и полупрозрачный div который их перекрывает. При этом все элементы управления перестают срабатывать на клики и наведение мышью. Что с этим можно сделать, не избавляясь от этого div'а?

https://jsfiddle.net/0hsf9aoo/

Answer 1

[Ankhena]

pointer-events: none; для дива
pointer-events: auto; для кнопок

https://jsfiddle.net/0hsf9aoo/2/

Comments

[EpIvIaK]

Как же это выручило... Спасибо!

Answer 2

[sharok]

Пример кода вашего, т.к решения могут быть разными.
Попробуйте у div'a установить свойство
pointer-events: none;

Данное свойство не работает для IE < 11

Comments

[Вячеслав Лебедев]

pointer-events - при скроле чтобы мышка не реагировала на блоки (всякие ховеры). И это позволит добиться большего fps. А на мобилках это свойство актуально?
подскажите если я ошибаюсь

[Александр]

https://jsfiddle.net/0hsf9aoo/

[Сергей delphinpro]

Вячеслав Лебедев: >> при скроле чтобы мышка не реагировала на блоки <...> подскажите если я ошибаюсь
pointer-events управляет любыми событиями указующего устройства (мышь, тачпад, сенсорный экран) на элементе. Значение none отключает реакцию на все возможные события. Элемент становится "прозрачным" для указующего устройства.

[Вячеслав Лебедев]

Сергей: спасибо, освежил знания :) вижу его полезным только при скроле и только для пк, а Ваше мнение на счет него?)

[Сергей delphinpro]

Вячеслав Лебедев: Бывает полезным когда нужно что то разместить поверх гугл/яндекс карты. бывают разные декорации, которые удобно делать прозрачными для мышки.
Если в ТЗ нет указания на поддержку IE10 то я довольно часто использую данное свойство.

[Вячеслав Лебедев]

Сергей: спасибо! буду лучше знать область применения этого свойства :)

Answer 3

[Вячеслав Лебедев]

Например при помощи позиционирования.
Лучше бы конечно код увидеть.

div {
  position: relative;
  z-index: -100; // задвинет этот див на задний план
}

Comments

[Александр]

Нет, визуально он должен перекрывать данные кнопки

[Вячеслав Лебедев]

LordGuard: покажи код если не сложно :)

[Александр]

Вячеслав Лебедев: https://jsfiddle.net/0hsf9aoo/