Question

Block is blinking on .hover()

Here is a full example – http://jsfiddle.net/xBEjQ/

How to fix this?

UPD: popup should be removed after the mouse leaved the smaller block (.image), not .popup block.

Answer 1

For updated Question: Since the mouse events won’t occur on that smaller element (it’s completely overlapped) you’d have to use a third <div> like this:

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

And add this CSS (note the higher z-index than the other .popup):

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

and script to match:

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

You can test it out here.

---

For previous question: Since the popup is over top of the element, use the mouseenter on the trigger, mouseleave on the popup, like this:

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

You can test it here.