jQuery Mouse Events

13 Jun, 2022
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.JavascriptJavascript<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:
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.JavascriptJavascript<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:
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:
MouseOver and MouseOut events:
nikhatkhan11
jQuery-Events
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?