jQuery mouseout() Method

jQuery mouseout() event occurs when a mouse pointer is leaves any child elements as well as the selected element. The jQuery mouseout method triggers the mouseout event, and when mouseout event occurs specified function will execute.

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 mouseout() method

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

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

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

Examples

This example represent the mouseout event

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

Run it...   »


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

$(document).ready(function(){
  $("div").mouseover(function(){
    $("input").css("background-color", "yellow");
  });
  $("div").mouseout(function(){
    $("input").css("background-color", "pink");
  });
});

Run it...   »