How to Check If the Mouse is Over an Element in jQuery

  5176 views   2 years ago jQuery

Use the CSS :hover Pseudo-class

You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery.

The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>jQuery Check If the Mouse is Over an Element</title>
        margin: 80px;
        height: 200px;        
        background: orange;
<script src=""></script>
         if($("#myDiv:hover").length != 0){
            $(".hint").text("Mouse is Over the DIV Element.");
        } else{
            $(".hint").text("Mouse is Outside the DIV Element.");
    <div id="myDiv"></div>
    <p class="hint"><!-- Hint text will be displayed here --></p>


Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]