jQuery Mouse Events

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:

Explore