check hover on mouseleave of element

Question

I've something like below code:

html:

<a href="#">foo</a>
<div id="bar">bar</div>

jQuery:

$('a').hover(function(){
    console.log('hovered');
},function(){
    if($('#bar').is(':hover')===false){
        console.log('bar is not hovered');
    }
});

But here on mouseleave of foo I wanted to check if the bar is hovered or not. So from foo mouse moves to bar but it logs me bar is not hovered.

jsfiddle

It works for me, Chrome latest version. – dashtinejad Aug 27 '14 at 05:06 — dashtinejad, Aug 27 '14 at 05:06

score 2 · Answer 1 · edited May 23 '17 at 12:27

This appears to be caused by the order that Internet Explorer processes the CSS and Javascript. There is no gap between the elements, so that is not the problem. Your code works properly in Chrome.

This is a bit ugly, but it supports my conclusion that Internet Explorer is processing the Javascript before the CSS changes & it does provide a way to get the results you would expect. Adding a setTimeout(fn, 0) solves your problem by pausing the Javascript long enough for the CSS to be processed.

$('a').hover(function(){
    console.log('hovered');
},function(){
    setTimeout(function(){
        if($('#bar').is(':hover')===false){
            console.log('bar is not hovered');
        }
    }, 0);
});

Here's a jsfiddle.

You may also want to read through this question (Why is setTimeout(fn, 0) sometimes useful?), as it has some really useful info explaining what is going on.

combining both of answer (your and husen) resulted fine work for me so, I'm unsure to accept an answer... so +1 for both answer... — Bhojendra Rauniyar, Aug 27 '14 at 06:18

score 1 · Answer 2 · answered Aug 27 '14 at 05:55

FIDDLE

function nesting will work as per your requirements:

$(document).ready(function(){
    $('a').hover(function(){
        console.log('A link is hovered');
    },function(){
        console.log('A link is Not hovered');
        $('#bar').hover(function(){
            console.log('Div is hovered');          
        },function(){
            console.log('Div is Not hovered');
        }); 
    });
});

score -2 · Answer 3 · answered Aug 27 '14 at 05:08

-2

Be sure that there is no gap between your elements. Check this CSS for example:

#bar{
    float: left;
    background: green;
}

a {
    float: left;
    background: red;
}

The float will not generate any gap between elements. Check the jsFiddle Demo.

answered Aug 27 '14 at 05:08

dashtinejad

6,193
4
28
44

check hover on mouseleave of element

3 Answers3