jQuery mouseenter() and mouseleave() Events
jQuery mouseenter is a mouse event that triggers when the mouse pointer enters an element, and mouseleave is a mouse event that triggers when the mouse pointer leaves an element.
Syntax:
$(selector).mouseenter(function)
and
$(selector).mouseleave(function)
Example: In this example, we have a div with a class “box.” It changes color to white on mouseenter and black on mouseleave using jQuery.
HTML
<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <style> .box { width: 200px; height: 100px; background-color: lightblue; } .box:hover { background-color: gray; } </style> </head> <body> <h2> Mouse Enter and Mouse Leave Events Example </h2> <div class="box"> Hover over the div </div> <script> $(document).ready(function () { // Using the mouseenter event $(".box").mouseenter(function () { $(this).css("color", "white"); }); // Using the mouseleave event $(".box").mouseleave(function () { $(this).css("color", "black"); }); }); </script> </body> </html> |
Output
The Complete List of jQuery events are listed below:
jQuery Events
jQuery events are actions or occurrences that happen on a web page, such as clicks, hover, or keypress. jQuery provides methods to handle and respond to these events with ease. jQuery events are used to create dynamic web pages.
Syntax:
$(selector).method(function)
Here We will explore some basic events along with their basic implementation of examples.
Contact Us