jquery remove blinking

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.

Answer 2

Updated your 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 3

show the popup on mouseover hide the popup on mouseout of the popover

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

Answer 4

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

This only applies if you have the "popup" over top of the "image". The reason it's blinking is because as soon as the "popup" shows it's triggering the "mouseout" on the "image" and thus hiding the "popup"

Your code will work fine as long as the "popup" isn't positioned over top of the "image".