Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to run code on mouseleave event in jQuery ?

  • Last Updated : 30 Sep, 2021

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.


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.


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.




<!DOCTYPE html>
        How to run code on mouseleave 
        event in jQuery ?
    <script src=
        $(document).ready(function() {
            $(".main").mouseleave(function() {
                    background: "green",
                    color: "white"
            $(".main").mouseenter(function() {
                    background: "none",
                    color: "black"
        .main {
            width: 300px;
            height: 200px;
            border: 2px solid black;
        <div class="main">
                How to run code on mouseleave 
                event in jQuery ?


My Personal Notes arrow_drop_up
Recommended Articles
Page :