The jQuery API method of .mouseleave() will allow things to happen when the cursor moves off the specified element(s). This is often paired with the .mouseenter() method.

.mouseleave() vs. .mouseout()

The .mouseleave() method differs from the .mouseout() method in that it is not as problematic. The .mouseout() method can lead to a bubbling effect where the mouse moves out of one element, it might cause problems with the containing element. The .mouseleave() method only triggers the handler when the mouse leaves the element it is bound to, not the descendant elements.


Example of jQuery API .mouseleave() and .mouseenter() methods:

This example sets up a change in the color of the element in which the cursor enters and triggers a change in the image in the display box.

$("#treeType li").mouseenter(function(){
    $("#treeType li").css("background-color","#444444");
    var variety = $(this).html();
    var imgSrc = "'images/" + variety + ".jpg'";
    $(this).css({"background-color":"#009929", "color": "#ffffff"});
    $("#treeBox").html("<img src="/ + imgSrc + "/>");
$("#treeType li").mouseleave(function(){
    $("#treeBox").html(" ");

This is the HTML

<ul id="treeType">
<div id="treeBox"></div>

This is the result: