WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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

Topic: JavaScript / jQueryPrev|Next

Answer: 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 box.

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

Related FAQ

Here are some more FAQ related to this topic:

Your Feedback:

We would love to hear from you, please drop us a line.