Skip to content
Related Articles

Related Articles

jQuery Mouse Events
  • Last Updated : 09 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

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 occured");
            }
            function leave() {
                $("#key").text(
                    "mouseleave event has occured");
            }
        });
    </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 occured");
                   }
                  function down()
                   {
                     $("#key").text("mousedown event has occured");
                   }
              });
            </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 occured");
                    }
                   function out()
                    {
                      $("#key").text("mouseout event has occured");
                    }
              });
            </script>   
    </html>

    Output:

    • Onloading web page:
    • MouseOver and MouseOut events:

    Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :