CODEWITHSUNDEEP
jqueryhoverblink
James
James

Reputation: 43647

jquery remove blinking

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.

Upvotes: 3

Views: 8812

Answers (4)

Jeremy
Jeremy

Reputation: 1

$(".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".

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630429

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.

Upvotes: 6

generalhenry
generalhenry

Reputation: 17319

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

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

Upvotes: 1

tinifni
tinifni

Reputation: 2392

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;

Upvotes: 1

Related Questions