Open In App

jQuery Mouse Events

Improve
Improve
Like Article
Like
Save
Share
Report

This article will explain different mouse events occurring based on mouse positions on a particular HTML element.

Mouse Events in jQuery:

  • mouseenter and mouseleave
  • mouseup and mousedown
  • mouseover and mouseout

mouseenter and mouseleave: The mouseenter event occurs when the mouse is placed over the HTML element and mouseleave event occurs when the mouse is removed from the element.

Javascript




<!DOCTYPE html>
<html>
  
<head>
    <script src="jquery.js"></script>
</head>
  
<body bgcolor="cyan">
    <p id="key">Original Text</p>
  
  
    <script>
        $("document").ready(function () {
            $("#key").mouseenter(enter);
            $("#key").mouseleave(leave);
            function enter() {
                $("#key").text(
                    "mouseenter event has occurred");
            }
            function leave() {
                $("#key").text(
                    "mouseleave event has occurred");
            }
        });
    </script>
</body>
  
</html>


Output:

  • On loading the webpage:
  • MouseEnter and MouseLeave events:
  • MouseUp and MouseDown events:

    mouseup and mousedown requires a mouse-click to occur.

    Javascript




    <html>
        <body bgcolor="#ff00ff">
            <p id="key">Original Text</p>
        </body>
            <script src = "jquery.js"></script>
            <script>
              $("document").ready(function()
               
                  $("#key").mouseup(up);
                  $("#key").mousedown(down);
                  function up()
                   {
                     $("#key").text("mouseup event has occurred");
                   }
                  function down()
                   {
                     $("#key").text("mousedown event has occurred");
                   }
              });
            </script>
    </html>

    
    

    Output:

    • On landing web page:
    • MouseUp and MouseDown events:
  • Mouseover and Mouseout:

    These events occur when the mouse is placed over some specific HTML element.

    Javascript




    <html>   
        <body bgcolor="#87FF2A">
            <p id="key">Original Text</p>
        </body>
        <script src = "jquery.js"></script>
            <script>
                $("document").ready(function()
               
                  $("#key").mouseover(over);
                  $("#key").mouseout(out);
                   function over()
                    {
                      $("#key").text("mouseover event has occurred");
                    }
                   function out()
                    {
                      $("#key").text("mouseout event has occurred");
                    }
              });
            </script>   
    </html>

    
    

    Output:

    • Onloading web page:
    • MouseOver and MouseOut events:



  • Last Updated : 13 Jun, 2022
    Like Article
    Save Article
    Previous
    Next
    Share your thoughts in the comments
    Similar Reads