jQuery - .mouseleave()?

.mouseleave()

What it does

  • Fires when the mouse pointer leaves the selected element.

  • Often used to revert effects applied during hover or mouseover.

Syntax

$(selector).mouseleave(function(){
    // code here
});

Example

<div id="box" style="width:200px;height:100px;background:lightblue;">Box</div>

<script>
$("#box").mouseleave(function(){
    $(this).css("background", "lightblue"); // revert background when mouse leaves
});
</script>

Key Points

  • Only triggers once when the mouse exits the element

  • Useful for undoing changes applied on mouseenter

  • Works well with animations or style changes

2️⃣ .hover()

What it does

  • A shortcut for mouseenter and mouseleave combined.

  • You pass two functions: one for when the mouse enters, and one for when it leaves.

Syntax

$(selector).hover(
    function(){ 
        // mouse enters
    }, 
    function(){ 
        // mouse leaves
    }
);

Example

<div id="box" style="width:200px;height:100px;background:lightblue;">Box</div>

<script>
$("#box").hover(
    function(){ // mouse enter
        $(this).css("background", "orange");
    }, 
    function(){ // mouse leave
        $(this).css("background", "lightblue");
    }
);
</script>

Key Points

  • Combines mouseenter + mouseleave in one method

  • Makes hover effects easy

  • Commonly used for menus, buttons, or animations