How to check if mouse is over an element? (jQuery)

Question

How to check if mouse is over an element?

I moving element to cursor position and I need to check if mouse is over an another element. How to do it?

<div class="dragged"></div> // I can move it
<div class="dropped"></div> // Need to drop here

$('.dragged').mousemove(function(e) {
   ...
   if($(".dropped").is(":hover")) { // of course doesn't work
        ...
   }
});

Thanks in advance.

If you're using jQuery UI draggable/droppable you can check the `ui` parameter of the `drop` event: http://api.jqueryui.com/droppable/#event-drop — Rory McCrossan, Jul 29 '14 at 09:21
Maybe you could use .mouseover ? http://api.jquery.com/mouseover/ — GCallie, Jul 29 '14 at 09:22

score 9 · Answer 1 · answered Jul 29 '14 at 09:25

9

You may try like this:

$('#test').click(function() {
    if ($('#Test').is(':hover')) {
        alert('Test');
    }
});

JS FIDDLE DEMO

answered Jul 29 '14 at 09:25

Rahul Tripathi

168,305
31
280
331

I moving element (.dragged) to cursor position and it always will be hover. – qwerty Jul 29 '14 at 09:34

score 3 · Answer 2 · answered Jul 29 '14 at 09:27

One valid approach is to "flag" the .dropped tag element when the mouse is enter. Finally, when you move .dragged, you can check is .dropped has the tag you put into them.

$('.dropped').hover(function() { 
  $(this).addClass('hovered');
}, function() {
  $(this).removeClass('hovered');
});

$('.dragged').mousemove(function(e) {
  ...
  if($(".dropped").hasClass(".hovered")) {
    ...
 }
});

Regards.

score 3 · Answer 3 · answered Jul 29 '14 at 09:33

try this :

  var hovred=null;
    $('.dropped').mouseenter(function(e) {
      hovred=$(this);
     });

$('.dropped').mouseleave(function(e) {
  hovred=null;
 });
$('.dropped').mousemove(function(e) {
   ...
   if($(this)==hovred && hovred != null) { 
    //do your stuff here man
   }
});

score 0 · Answer 4 · answered Jul 29 '14 at 09:21

0

Do something like this.

 var $container = $('.container');
 $container.mouseenter(function(e) {
  //do something
 });

answered Jul 29 '14 at 09:21

Sandeep Pal

2,067
1
16
14

1

Thanks, but it will not work because near to mouse already have element. (dragged) – qwerty Jul 29 '14 at 09:27
Another fun bug: Safari generates `mouseenter`/`mouseleave` events that consider the `box-shadow` part of the element. – Adam Leggett Mar 21 '17 at 19:46

score 0 · Answer 5 · answered Jul 29 '14 at 09:24

<script type="text/javascript">
function call_mouseover()
{ 
  alert("mouse is over on the div");
}
function call_mouseout()
{
 alert("mouse out from the div");

}
</script>


<div class="dragged" onmouseover="call_mouseover();" onmouseout="call_mouseout();"></div>
<div class="dropped" ></div> // Need to drop here

How to check if mouse is over an element? (jQuery)

5 Answers5