jQuery “hover state” - Test if element is no longer being hovered over

Question

I know you can test, if a element is being hovered over by using:

$('.foo:hover').length > 0;

or on my case:

$(this).filter(':hover').length > 0;

Either will return a value of true if the element triggers the 'mouseenter' event. How ever i wish to test if an element is no longer being hovered over. I tried using:

!($(this).filter(':hover').length > 0;)

as well as

$(this).filter(':hover').length < 0;

But it is not giving me the desired result.

Example using above code

The context for this is a drop down menu i am working on.

Answer 1

Why not listen for the following:

  $('.box').on('mouseleave', function() {
    console.log($(this).filter(':hover').length > 0);
  });

Answer 2

Others have already mentioned mouseleave ; here's a snippet that's very similar to Robert's answer:

$('.box').on('mouseenter', function() {
  console.log($(this).filter(':hover').length > 0);
  $(this).on('mouseleave', function() {
    $(this).off('mouseleave');
    console.log('bye!');
  })
});

The difference is that it concerns itself solely with the original element in question, and kills itself once it fires.