Сделайте front <div>, чтобы реагировать на события мыши, но распространять их и на более низкие элементы

Question

Сделайте front <div>, чтобы реагировать на события мыши, но распространять их и на более низкие элементы

0

У меня есть движущийся фон, состоящий из нескольких слоистых изображений, которые должны реагировать на изменения положения мыши. Этот большой <div> размещен на нижнем уровне моей страницы, используя position:absolute, top: 0px и низкий z-index.

Вероятно, вы уже поняли первую проблему: initally, этот <div> не получил никакого события мыши, когда курсор перемещается в один из верхних элементов.

Первым решением может быть установка этого свойства CSS для каждого элемента front: pointer-events: none; , но мне это действительно не нравится. Как насчет кнопки? Если я наведу на него курсор, фон будет двигаться, как ожидается, но щелчок не будет запущен.

Вторичная опция, безумный трюк: добавьте еще один прозрачный <div> в корень страницы, в том же абсолютном положении фона, но с очень высоким z-index. Он будет слушать координаты мыши и будет передавать их на движущийся фон.

Не знаю, что вы думаете об этом, но оно должно работать отдельно от этого: этот прозрачный слой захватывает события мыши, но они не распространяются на нижние тексты и кнопки, которые по-прежнему остаются "неактивными". Есть ли способ исправить это поведение? Сделайте прозрачный прослушиватель для захвата событий мыши, а также распространите их на каждый нижний элемент (что-то вроде "специального" правила pointer-events).

TheUnexpected 03 янв. 2014, в 12:38

Источник

0

У вас все еще есть проблема, как это получилось?
Angular University 04 янв. 2014, в 23:45
0

Извините за задержку, у меня все еще есть эта проблема, но я работаю над другими вещами, я предоставлю JSFiddle очень скоро
TheUnexpected 05 янв. 2014, в 13:35

Теги:

javascript

html

css

1 ответ

Ещё вопросы

У вас все еще есть проблема, как это получилось?
Извините за задержку, у меня все еще есть эта проблема, но я работаю над другими вещами, я предоставлю JSFiddle очень скоро

Angular University · Answer 1 · 2014-01-03T10-25-00.000Z

Можете ли вы предоставить JsFiddle? Я не мог воспроизвести его здесь в этой скрипке.

Создание кнопки с высоким индексом z по-прежнему позволяет событию mouvemove быть захваченным базовым div.

Это решит проблему?

HTML:

<div id='movingBackground' class='moving-background' >

    <a class='button'>Button</a>

</div>

<div id='coordinates'>Coordinates get updated here on hover over div above</div>

CSS:

.moving-background {
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    width:300px;
    height:100px;    
}

.button {
    position:absolute; 
    top:20px;    
    left:50px;
    height:50px;
    width:100px;
    background:blue;
    color:white;
    cursor:pointer;
    z-index:20;     
}

Javascript:

$('#movingBackground').on('mousemove',function(event) {
    $('#coordinates').text('X ' + event.pageX + ' - Y ' + event.pageY);
});