CODEWITHSUNDEEP
javascriptjqueryhover
Shubo
Shubo

Reputation: 267

How to detect if mouse is over an item in jQuery or Javascript

Is it possible to check if the cursor is over an item? In my case I can't use focus(), mouseenter() or any of the related methods but I just need to find out if the mouse is over it.

Upvotes: 2

Views: 2201

Answers (4)

Si-
Si-

Reputation: 48

Instead of checking the state of the mouse, in this particular case you could create a transparent overlay element on top of the one you want to hide.

So as that when the area is hovered it shows and when it's not it gets hidden obviously setting the element that is to be hidden (until hovered) with a default display: none; in your css - therefore it only shows when hovered, to the users eye.

I know it's not what the OP was asking for but it works.

$(document).ready(function(){
    /* 
    * #object is your element you 
    * want to hide unless hovered
    */
    $("#object").on("mouseleave", function(){
        // divs you want to hide/show
        $('#object').hide();
        $('#overlay').show();
    })

    /* 
    * #overlay is the transparent element 
    * that will sit over the top of #object
    */
    $("#overlay").on("mouseenter", function(){
        // divs you want to hide/show
        $('#object').show();
        $('#overlay').hide();
    })
});

see it working here http://jsfiddle.net/si_jsfiddle/CvkyE/

This is a good option because mouseenter and mouseleave aren't affected by objects on top of them especially with out the tag object parameter set in the on() method, this is also why they're great for div containers with links on top etc...

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

Could this be useful? event.target

fiddle DEMO

Ex:

function handler(ev) {
  var $target = $(ev.target);
  if( $target.is("#element") ) {
   alert('Here am I !');
  }
}
$("#element").hover(handler);

And here is a slight modification to remove element

demo

function handler(ev) {
  var $target = $(ev.target);
  if( $target.is("#element") ) {
         $target.remove();
  }
}
$("#element").mouseleave(handler);

Upvotes: 2

Faraz Zafar
Faraz Zafar

Reputation: 1

<input etc.... onmouseover="if (condition){calltoafunction();"}>

On Javascript:If the Cursor is over an Item then if condition work.

Upvotes: 0

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

http://api.jquery.com/mouseover/ here is the jquery function. It has a good example too.

Upvotes: 0

Related Questions