Как использовать наложение DIV без потери поведения мыши в слоях ниже?

Question

Допустим, у меня есть веб-страница, содержащая различные элементы управления, для некоторых из которых определено поведение при наведении и щелчке.Затем я добавляю на страницу полупрозрачный оверлей DIV с дополнительной информацией, который накладывается поверх остальной части страницы:

<div class="overlay"></div>

.overlay {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    background: rgba(0,0,0,.5);
}

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

Есть ли способ использовать наложение таким образом, сохраняя взаимодействие мыши с основным содержимым?

ВВ моем приложении требуется оверлей, но я могу использовать любой JavaScript, CSS, jQuery или другие методы, которые могут работать.

Спасибо!

Answer 1

Вы можете использовать новейший атрибут CSS3 - pointer-events: none;

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

Answer 2

Только что написал это ... едва проверено. Извините, но я думаю, что это работает.

$.fn.invisiClone = function() {
    $.each($(this), function() {
        var newTop = $(this).offset().top;
        var newLeft = $(this).offset().left;
        var newHeight = $(this).outerHeight()
        var newWidth = $(this).outerWidth()
        var newClass = $(this).attr('class');
        var newId = $(this).attr('id');

        var newDiv = document.createElement('div');
        $(newDiv).attr('class', newClass);
        $(newDiv).attr('id', newId);
        $(newDiv).css({
            position: 'absolute',
            top: newTop,
            left: newLeft,
            height: newHeight,
            width: newWidth,
            'background-color': 'transparent',
            'z-index': 1000
        })

        $(newDiv).attr('delete','delete')

        $(newDiv).html('');

        $(newDiv).prependTo('body');

    })


}

function killInvisiClones() {
    $('*[delete]').remove();
}

Итак, запустите функцию для DOMS, который вы хотите активировать

$('.keepAlive').invisiClone();

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

killInvisiClones()

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

Answer 3

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