如何检测鼠标是否在 jQuery 或 Javascript 中的项目上

Question

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.

Answer 1

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...

Answer 2

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);

Answer 3

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

Answer 4

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

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