CODEWITHSUNDEEP
jquery
pingu
pingu

Reputation: 624

jQuery: check if mouse is over an element

I'm working with the following scenario: I have an image map with hotspots. When you mouse over an <area> on the image map, shows a <div class="info-panel">. This div overlaps the <area>, so the div is hidden on mouseleave of <div class="info-panel">.

This mostly works, but on the odd occasion, for example if you go ballistic and move the mouse around too fast, the div stays up. I think it may be in the small instances where the <area> and the <div> intersect. I wouldn't worry about it, only the client has pointed it out as a bug.

The only foolproof way I can think to fix this is to check on mouse move if an info-window is visible. If one is, then check whether the mouse is currently over it -- if it's not, then hide it. This will ensure that an info window is never visible if a mouse is not over it.

My question is: how do I check whether the current mouse position is over an info window? Bearing in mind that this is for the exception rather than the rule, and I don't know for sure whether an info window is visible or not?

Upvotes: 4

Views: 8757

Answers (3)

Bora Demircan
Bora Demircan

Reputation: 86

Try this:

function show_info (thelink,info_panel) {   
    var timer; 
    timer = setTimeout(function(){
        $(info_panel).stop(true, true).fadeIn('normal');
    }, 300); 
    $(thelink).mouseout(function(){ clearTimeout(timer); });
}

function hide_info (resim) {
    $(info_panel).stop(true, true).fadeOut('normal');
}

And the html code should be:

<a href="#" id="thelink" onmouseover="show_tipbox('#thelink','#info_panel');">The link</a>
<div id="info_panel" onmouseout="hide_tipbox('#info_panel');">Info Panel Content</div>

Upvotes: 2

Luca Matteis
Luca Matteis

Reputation: 29267

When you mouseout have a timer that runs after 1 second for example, that closes all windows.

When you mouseover be sure to remove that timer... so the timer is only set when you mouseout.

Something like:

var timer; 
$(".window").mouseout(function(){
    $(".window").hide(); // regular hide

    // run the same thing after 1 second
    // to catch windows that are still open
    timer = setTimeout(function(){
        $(".window").hide(); // regular hide
    }, 1000); // 1 second
});

// be sure to remove the timer when you mouseover
$(".window").mouseover(function(){
    clearTimeout(timer);

    // other stuff
});

Upvotes: 9

jAndy
jAndy

Reputation: 236182

instead of mouseover try mouseenter and mouseleave as event handlers.

Upvotes: 2

Related Questions