Mouse Events in jQuery with Examples

In this article, I am going to discuss the Mouse Events in jQuery with Examples. Please read our previous article, where we discussed the jQuery Change Event with Examples. At the end of this article, you will understand everything about the jQuery Mouse Events.

Mouse Events in jQuery

The Mouse Event represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, double click, mouse, mouse enter, mouse out, etc.

If you want to attach any handler with these mouse events, then jQuery provides a bunch of mouse event handling methods. In this article, we will learn about these mouse events.

List of jQuery Mouse Events

Here is the list of mouse events used in jQuery.

click(): The event occurs when the user clicks on an element
contextmenu(): The event occurs when the user right-clicks on an element to open a context menu
dblclick(): The event occurs when the user double-clicks on an element
hover(): attach one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
mouseenter(): The event occurs when the pointer is moved onto an element
mouseleave(): The event occurs when the pointer is moved out of an element
mouseover(): The event occurs when the pointer is moved onto an element, or onto one of its children
mouseout(): The event occurs when a user moves the mouse pointer out of an element, or out of one of its children

Syntax:

All the events take a handler function as parameter for example,
$(selector).mouseenter( function(){} ) or
$(selector).mouseleave( function(){} )

But hover() method can take two handlers as parameters. The first one is for mouse enter and the second one is for mouse leave
$(selector).hover(handlerIn, handlerOut)
Actually, this is the shorthand for $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Example: jQuery Mouse Click Event

Now by some examples, we will see that how to attach event handlers to these events. Let’s see the click event first. In the below example, we have <div> element. When we will click on the div notice at the change i.e. it will append the text You clicked the div as well as also change the background color of the div element to yellow.

<html>
<head>
    <title>jQuery Mouse Events</title>
</head>
<body>
    <h2>jQuery Mouse Events</h2>
    <section>
      <div>
        <h3>This is a Title</h3>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
          laudantium.
        </p>
      </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("div").click(function () {
          $(this).css("background-color", "yellow");
          $("div p").append("<br>" + "You clicked the div");
        });
      });
    </script>
</body>
</html>

Now, run the above code and you will see the following page in the browser. Now, click anywhere between the div element which shown in between the red color as shown in the below image.

Once you click anywhere between the div element, then the text “You clicked the div” is appended as well as the background color of the div element is changed to yellow as shown in the below image.

Example: jQuery dblclick mouse event

In the below example, we will see the jQuery dblclick mouse event. In the below example, when we will double click on the <div>, notice that we are adding a new class to the div.

<html>
<head>
    <title>jQuery Mouse Events</title>
    <style>
      .test {
        background-color: rgb(120, 247, 215);
        font-style: italic;
        font-weight: 700;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
          0 6px 6px rgba(0, 0, 0, 0.23);
        border: 2px solid black;
        border-radius: 20px;
      }
    </style>
</head>
<body>
    <h2>jQuery dblclick Event</h2>
    <section>
      <div>
        <h3>This is a Title</h3>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
          laudantium.
        </p>
      </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("div").dblclick(function () {
          $(this).addClass("test");
        });
      });
    </script>
</body>
</html>

Now, run the above code and you will see the following page in the browser. Now, double click anywhere between the div element which shown in between the red color as shown in the below image.

Once you double click anywhere between the div element, then the class test is applied to the div element as shown in the below image.

Example: jQuery right-click event (contextmenu())

Now, we will see the right-click event. In the below example, we are using contextmenu() event. When we will right-click on the <div> the div will be faded and a text will be appended to the <p> element.

<html>
<head>
    <title>jQuery Mouse Events</title>
</head>
<body>
    <h2>jQuery contextmenu Event</h2>
    <section>
      <div>
        <h3>This is a Title</h3>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
          laudantium.
        </p>
      </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("div").contextmenu(function () {
          $("div").fadeTo(500, 0.4);
          $("div p").append("<br><br><i>You have Right Clicked the div</i>");
        });
      });
    </script>
</body>
</html>

Now, run the above code and you will see the following web page in the browser. Now, right-click anywhere between the div element which shown in between the red color as shown in the below image.

Once you right-click anywhere between the div element, then the test is appended to the div element as shown in the below image.

Example: jQuery mouse up and mouse down event

Now, we will see the jQuery mouse down and mouse up event. In the below example, mousedown() event is triggered when you press any mouse button, and mouseup() event is triggered when you release that button.

<html>
<head>
    <title>jQuery Mouse Events</title>
    <style>
      .test {
        background-color: rgb(120, 247, 215);
        font-style: italic;
        font-weight: 700;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
          0 6px 6px rgba(0, 0, 0, 0.23);
        border: 2px solid black;
        border-radius: 20px;
      }
    </style>
</head>
<body>
    <h2>jQuery mouse up and mouse down event</h2>
    <section>
      <div>
        <h3>This is a Title</h3>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nisi,
          laudantium.
        </p>
      </div>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("div")
          .mousedown(function () {
            $(this).addClass("test");
          })
          .mouseup(function () {
            $(this).removeClass();
          });
      });
    </script>
</body>
</html>

Now run the above code, and then press and hold the mouse button and you will see that the mousedown event is fired and the test class is applied to the div element as shown in the below image.

Once you release the press button, the mouseup event is fired and it will remove the test class from the div element and you will see the following output in the browser.

Example: jQuery Mouse Enter and Mouse Leave event

Now, we will see mouse enter and mouse leave event. In the below example, we have designed a card. If you enter the mouse cursor on the card then the container will be displayed.

<html>
<head>
    <title>jQuery Mouse Events</title>
    <style>
      body {
        background-color: #ddd;
        font-family: Arial, Helvetica, sans-serif;
      }
      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        width: 30%;
        margin: auto;
      }
      img {
        width: 100%;
        height: 300px;
      }

      .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
      }

      .container {
        padding: 10px 16px;
        display: none;
      }
      button {
        background-color: #1c4450;
        border: none;
        color: white;
        padding: 10px 25px;
        margin: 10px 0;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        border-radius: 10px;
        cursor: pointer;
        transition-duration: 0.4s;
      }
    </style>
</head>
<body>
    <div class="card">
      <img src="C:\Users\HP\OneDrive\Pictures\img_avatar.JPG" alt="Avatar" />
      <div class="container">
        <h4><b>John Doe</b></h4>
        <p>Web Developer & Designer</p>
        <button>Know More</button>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(".card")
        .mouseenter(function () {
          $(".container").show(500);
        })
        .mouseleave(function () {
          $(".container").hide(500);
        });
    </script>
</body>
</html>

Now, run the above code and once you enter the mouse cursor on the card then the container will be displayed as shown in the below image.

Now leave the mouse cursor and the container will be removed and you will see the following page in the browser.

Now the above code can be shortened by the hover() method. We already know the syntax. 1^st handler is for mouse enter and 2^nd handler is for mouse leave event. So, modify the script section of the same example as follows to use the mouse hover method and will produce the same result.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(".card").hover(
    function () {
      $(".container").show(500);
    },
    function () {
      $(".container").hide(500);
    }
  );
</script>

In the next article, I am going to discuss the jQuery Event Object with Examples. Here, in this article, I try to explain Mouse Events in jQuery with Examples and I hope you enjoy this jQuery Mouse Events article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

Mouse Events in jQuery