jquery удалить мигание

Question

Блок мигает .hover()

Вот полный пример - http://jsfiddle.net/xBEjQ/

Как это исправить?

UPD: всплывающее окно должно быть удалено после того, как мышь покинула меньший блок (.image), а не .popup блок.

Answer 1

Для обновленного Вопроса: Поскольку события мыши не будут происходить на этом меньшем элементе (он полностью перекрывается), вам придется использовать третий <div>, например так:

<div class="block">
    <div class="popup"></div>
    <div class="popup upper"></div>
    <div class="image"></div>
</div>

И добавьте этот CSS (обратите внимание, что z-index выше, чем остальные .popup):

.upper { width: 100px; height: 100px; z-index: 41; }

и соответствующий скрипт:

$(".block .image").mouseenter(function(){
    console.log($(this).siblings(".popup").length);
  $(this).siblings(".popup").show();
});
$(".block .upper").mouseleave(function(){
  $(this).siblings(".popup").andSelf().hide();
});

Вы можете проверить это здесь .

---

Для предыдущего вопроса: Поскольку всплывающее окно находится над элементом, используйте mouseenter на триггере, mouseleave на всплывающем окне , вот так:

$(".block .image").mouseenter(function(){
  $(this).siblings(".popup").show();
});
$(".block .popup").mouseleave(function(){
  $(this).hide();
});

Вы можете проверить это здесь .

Answer 2

показать всплывающее окно при наведении мыши скрыть всплывающее окно при наведении мыши всплывающего окна

http://jsfiddle.net/generalhenry/WkH6q/

Answer 3

Обновил ваш jsfiddle: http://jsfiddle.net/xBEjQ/6/

HTML

<div class="block">
    <div class="popup"></div>
    <div class="image"></div>
</div>

JQuery

$(".block .image").mouseover(function(){
    $(this).parent().find(".popup").show();
});

$(".block .popup").mouseout(function() {
    $(this).hide();
});

CSS

.block { position: relative; width: 400px; height: 400px; background: #ccc; }
.popup { display: none;
    position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: #eee; z-index: 40; }
.image { position: relative; width: 100px; height: 100px; background: #aaa; z-index: 30;

Answer 4

$(".block .image").mouseover(
    function(){
        $(this).parent().find(".popup").show();
    }
);
$(".block .popup").mouseout(
    function(){
        $(this).hide();
    }
);

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

Ваш код будет работать нормально, если «всплывающее окно» не расположено поверх «изображения».