Jquery mouseover не работает, когда элементы перекрываются

Question

Jquery mouseover не работает, когда элементы перекрываются

0

Я не могу понять что-то, пожалуйста, помогите. У меня есть два элемента: один внутри другого. Оба имеют прослушиватель мыши.

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

Я думал о jquery exclude selection? Но я уверен, что есть намного более простое и лучшее решение.

Вот код:

#outer{
    width:500px;height:500px;position:absolute;
    z-index:1;
}
#inner{
    padding:10px;position:relative;top:50%;left:50%;
    z-index:2;
}

<div id='outer'>
    <span id='inner'>&nbsp;</span>
</div>

$('#outer').mouseover(function(){ console.log('outer'); });
$('#inner').mouseover(function(){ console.log('inner'); });

Почему z-индекс не работает в этом случае? Я уверен, что ситуация будет такой же, если я буду плавать по двум объектам друг на друга, или один из них будет объектом документа, а другой - внутри.

Ninet9 25 апр. 2014, в 21:39

Источник

0

внутреннее событие запускается в jsfiddle (я использую Chrome). jsfiddle.net/WBLwL Какой браузер вы используете?
Trent 25 апр. 2014, в 19:45
1

тоже работает в firefox
juvian 25 апр. 2014, в 19:46
0

На отдельном примечании ... странно, как у вас внутреннее настроено как относительное, а внешнее настроено как абсолютное. Обычно это было бы наоборот, так что внутреннее положение абсолютно позиционировано относительно внешнего. Каково ваше намерение там?
Trent 25 апр. 2014, в 19:46
0

Это совершенно плохо. у меня был метод console.clear () перед обоими журналами, и я не предполагал, что при вызове внутреннего слушателя будет также вызван внешний слушатель. Поэтому, прежде чем я смог увидеть «внутренний», он вызвал функцию внешнего, которая очистила консоль и выпустила «внешний» (на самом деле, я до сих пор не понимаю, почему это происходит. Почему внешний вызывается, когда я перемещаю мышь во внутренний? ?) кстати относительный-абсолютный не был предназначен.
Ninet9 25 апр. 2014, в 21:06

Показать ещё 2 комментария

Теги:

javascript

jquery

1 ответ

Ещё вопросы

внутреннее событие запускается в jsfiddle (я использую Chrome). jsfiddle.net/WBLwL Какой браузер вы используете?
На отдельном примечании ... странно, как у вас внутреннее настроено как относительное, а внешнее настроено как абсолютное. Обычно это было бы наоборот, так что внутреннее положение абсолютно позиционировано относительно внешнего. Каково ваше намерение там?
Это совершенно плохо. у меня был метод console.clear () перед обоими журналами, и я не предполагал, что при вызове внутреннего слушателя будет также вызван внешний слушатель. Поэтому, прежде чем я смог увидеть «внутренний», он вызвал функцию внешнего, которая очистила консоль и выпустила «внешний» (на самом деле, я до сих пор не понимаю, почему это происходит. Почему внешний вызывается, когда я перемещаю мышь во внутренний? ?) кстати относительный-абсолютный не был предназначен.

Amit Soni · Answer 1 · 2014-04-25T19-14-00.000Z

вы можете обмануть вещи. сначала добавьте class в свой outer div, а во-вторых, вместо использования события mouseover мы используем событие mouseenter и mouseenter это событие с этим классом.

как это

$('.outer').mouseenter(function(){ console.log('outer'); });

и вместо использования события mouseover на вашем inner div используйте событие hover.

В первом случае function hover вызывает вызов mouseover и second on mouseout.

Хитрость заключается в том, что при первой функции мы удаляем класс родительского div, т. mouseenter outer div, а во второй - добавляем этот класс снова и mouseenter событие mouseenter родительского div.

как это

$('#inner').hover(function(){
    $parent = $(this).parent();
    $parent.removeClass("outer");
    console.log('inner'); 
},function(){
    $parent.addClass("outer").trigger("mouseenter");
});

вот как вы можете достичь своей задачи.

вот ДЕМО