.mouseleave()

In this chapter you will learn:

  1. Syntax and Description for .mouseleave() event
  2. How to react to mouse leave event

Syntax and Description

.mouseleave(handler)            
.mouseleave()

handler is function to execute each time the event is triggered. Return value is the jQuery object, for chaining purposes.

mouseleave binds an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

.mouseleave(handler) is a shortcut for .bind('mouseleave', handler), .mouseleave() is a shortcut for .trigger('mouseleave').

We can also trigger the event when another element is clicked.

$('#other').click(function() {

 $('#outer').mouseleave();

});

Listen to mouse leave event

The following cascades mouse leave event.

<html><!-- j  a v  a2  s  . c om-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").mouseover(function(){
                $(this).append('<span style="color:#F00;">mouseover.</span>');
            }).mouseleave(function(){
                $(this).append('<span style="color:#00F;">mouseleave</span>');
            });
        });
    </script>
  </head>
  <body>
    <body>
     <div>j ava2s.com</div>
    </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter:

  1. Syntax and Description for .mousemove() event
Home » jQuery » Event
Event
Event attributes
event.keycode
event.clientX/clientY
pageX/pageY
Cancel event
Event target
bind
.blur()
.change()
.click()
.error()
.dblclick()
.delegate()
.die()
.focus()
.hover()
.keydown()
.keypress()
.keyup()
.live()
.load()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseover()
.mouseout()
.mouseup()
.off()
.on()
.one()
.ready()
.resize()
.scroll()
.select()
.submit()
.toggle()
.trigger()
.triggerHandler()
.unbind()
.undelegate()
.unload()