Jquery hovered item over 'a' tag

Question

I have a link element and when you hover over it a div appears. This div is meant to be over the link element. When I move my mouse the div that is showing flickers. Is there a way to fix this. I am assuming it is beacuse the div is now covering the link element.

Thanks, C

Answer 1

It sounds like you're not testing to see if the div is already visible or not. You test visibility using the following code:

if ($("div").is(":hidden")) {
    // make div visible here
}

Hope this helps.

Answer 2

I guess you are using some code like this:

$("a").hover(function () { // Enter
    $("div").show();
}, function () { // Leave
    $("div").hide();
});

In this case, your guess is correct. If the div is floating over the a, the mouse leave is triggered when the div is displayed, because the mouse starts to be on the div and not on the a. Then, the div is hided, the mouse enter the a again... And all begins another time.

If you can avoid the div to appear over (with z-index, for example), it'll be more simple.

Otherwise, I suggest you do something like this:

$("a").mouseenter(function () {
    $("div").show();
});

$("div").mouseleave(function () {
    $("div").hide();
});

If your mouse will be always over the div when it's opened, then it can close itself if the mouse leaves.

Answer 3

Thanks. Here is the code I am now using...

$('area,#map-zoom').hover(function(){ $('#map-zoom').show();
},function() { $('#map-zoom').hide(); });

I have added the hover function to the appearing div aswell.