jQuery mouseleave() Method

jQuery mouseleave() event occurs when a mouse pointer is leaves the selected element. The jQuery mouseleave method triggers the mouseleave event, and when the event occurs specified function will execute.

This method is usually used together with the mouseenter() method.

Difference between mouseleave() and mouseout() event

jQuery mouseleave() event only triggers when a mouse pointer is leaves the selected element. Whereas mouseout() event is triggers when a mouse pointer is leaves the selected element as well as any child elements inside it.

Syntax

This syntax represent to the mouseleave() method

$(selector).mouseleave();        // This syntax does not accept any arguments.

and this syntax represent to attach a function to the mouseleave event

$(selector).mouseleave(function);
Parameter Type Description
function Function Optional. Specifies the function to execute when the mouseleave is occurs

Examples

This example represent the mouseleave event

$(document).ready(function(){
  $("input").mouseenter(function(){
    $("input").css("background-color", "yellow");
  });
  $("input").mouseleave(function(){
    $("input").css("background-color", "pink");
  });
  $("#btn1").click(function(){
    $("input").mouseenter();
  });  
  $("#btn2").click(function(){
    $("input").mouseleave();
  });
});

Run it...   »


This example represent to attach a function to the mouseleave event.

$(document).ready(function(){
  $("input").mouseenter(function(){
    $("input").css("background-color", "yellow");
  });
  $("input").mouseleave(function(){
    $("input").css("background-color", "pink");
  });
});

Run it...   »