Master Query .mouseleave(): Bind Event Handlers to mouseleave Event

jQuery mouseleave: Main Tips

• The jQuery .mouseleave() method attaches an event handler to mouseleave event, or triggers the assigned event handler.
• This method is similar to .mouseout(). The main difference is that .mouseleave() does not react to event bubbling.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Usage of .mouseleave() Method

The .mouseleave()e in jQuery adds an event handler, running a function when the mouseleave event occurs. The method can also execute the assigned event handler.

$("div").mouseleave(() => {
    $("div").css("background-color", "red");
});

Follow this syntax to trigger the mouseleave event:

$("selector").mouseleave();

Add the event handler by adding a function:

$("selector").mouseleave(event,function);

.mouseleave() and Event Bubbling

The event handler of mouseleave event is only triggered when the mouse exits the element it is attached to - not its descedant. That means jQuery .mouseleave() does not support event bubbling. See the example below to see the difference it creates between .mouseleave() and .mouseout():

var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    $( "p:last", this ).text( ++i );
  })
  .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    $( "p:last", this ).text( ++n );
  })
  .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
  });