How to run code on mouseleave event in jQuery ?
In this article, we will see how to run the code when the mouse leaves into a specific area using jQuery. To run the code on a mouse leave into a specific area, the mouseleave() method is used. The mouseleave() method works when the mouse pointer leaves the selected element.
Syntax:
$(selector).mouseleave(function)
Parameters: This method accepts a single parameter function which is optional. It is used to specify the function to run when the mouseleave event is called.
Example:
HTML
<!DOCTYPE html> <html> <head> <title> How to run code on mouseleave event in jQuery ? </title> <script src= </script> <script> $(document).ready(function() { $(".main").mouseleave(function() { $(".main").css({ background: "green", color: "white" }); }); $(".main").mouseenter(function() { $(".main").css({ background: "none", color: "black" }); }); }); </script> <style> .main { width: 300px; height: 200px; border: 2px solid black; } </style> </head> <body> <center> <div class="main"> <h1>GeeksforGeeks</h1> <h3> How to run code on mouseleave event in jQuery ? </h3> </div> </center> </body> </html> |
Output:
Please Login to comment...