Check that the mouse is not in the element

Question

I want to run a code, but this code can only be executed if the mouse are not about a div. I tested the .mouseout() but it checks if the mouse is out, that’s not it, I need to check if the mouse is not in there at that time, if it is not running the code.

Some solution?

Answer 1

Check if the element is suffering Hover, if it is not it is because the mouse is not on it:

var mouseFora = !$(meuElemento).is(":hover");

^Source

Answer 2

You can use the is jQuery, as parameter can pass selectors, functions, elements and selection, more details in documentation.

Example:

$(document).on('click', '.executa', function(event){
   // Obs: setTimeout apenas para dar tempo de colocar ou tirar o mouse
   // da área para realizar testes. Em uma situação real
   // já se usa o IF direto
   setTimeout(function(){
     if ($('#area').is(':hover')){
    	alert('Mouse na área');
     } else  {
    	alert('Mouse fora da área');
     }
  }, 2000);
});

#area{
  width:300px;
  height:300px;
  background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="area"></div>
<button class="executa">Executa</button>

Answer 3

There is a library called jQuery Outside Events that implements "outside" events that are executed when event occurs outside the element in question.

These are the events "from outside": clickoutside, dblclickoutside, focusoutside, bluroutside, mousemoveoutside, mousedownoutside, mouseupoutside, mouseoveroutside, mouseoutoutside, keydownoutside, keypressoutside, keyupoutside, changeoutside, selectoutside, submitoutside

Below an example of the event mouseoveroutside that is fired when mouse is outside the element.

/*
 * jQuery outside events - v1.1 - 3/16/2010
 * http://benalman.com/projects/jquery-outside-events-plugin/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */
(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");

$(function(){
  
  var elem = $("#elemento");

  // quando o mouse estiver sobre o elemento
  elem.bind('mouseover', function(event){
    console.log()
    $(this)
    .removeClass('dentro')
    .children('#header').text('Dentro');
  });

  // evento quando o foco do mouse estiver fora do elemento
  elem.bind('mouseoveroutside', function(event){    
    $(this)
    .addClass('dentro')
    .children('#header').text('Fora');
  });
  
});

  #elemento {
    font-family: Arial;
    color: black;
    width: 150px; 
    height: 150px; 
    border-radius: 5px; 
    text-align: center; background-color: #CCC;
  }
  #elemento.dentro { background-color: RoyalBlue; color: white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="elemento">
  <h1 id="header"></h1>
</div>

Github of the Project