How to check if the mouse is over an element in jQuery?


Read {count} times since 2020

Here is a simple plugin to check if the mouse is over an element in JQuery. Open your jQuery source file and search for window.jQuery = window.$ = jQuery; 

Paste the code shown below after the code you have just found.

<span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">};</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(){</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">===</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> document </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">?</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">contents</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mousemove</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">){</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">jQuery</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">pageX</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">,</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">e</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">pageY</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}});</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">find</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"iframe"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">load</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">}</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">documentHandler</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">fn</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">ismouseover </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">overThis</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">false</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">eq</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="lit" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">0</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">each</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">function</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">{</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">is</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"iframe"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">?</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">).</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">contents</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">().</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">find</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="str" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">"body"</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">)</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">:</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">(</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">this</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">);</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">var</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">();</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result<br /> </span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">left</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">left </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">+</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">outerWidth</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">x </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">top</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"><=</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">$</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">&&</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> offset</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">top </span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">+</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $current</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">outerHeight</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">()</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">></span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> $</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">mlp</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">.</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">y</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">});</span><span class="kwd" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">return</span><span class="pln" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;"> result</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">;</span><span class="pun" style="border: 0px; margin: 0px; padding: 0px; vertical-align: baseline;">};</span>

To check if mouse is hovering an element, just check it like this:

$("div").ismouseover()

The .ismouseover() function will return true if the mouse is hovering the element and false if it’s not hovering.
This function is tested on IE7+, Chrome 1+ and Firefox 4. It is working properly on all these browsers.

NOTE The solution does not work if the element is an iframe. Because the mousemove event does not fire over the iframe, and the Mouse Last Position is not updated.

Show Comments