.mouseenter()

Syntax and Description


.mouseenter(handler)              
.mouseenter()

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

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

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

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


$('#other').click(function() {
 $('#outer').mouseenter();
});

Listen to mouse enter event

The following code chains the mouse over and mouse enter event handlers together.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w ww  .j  ava  2  s .  c o  m-->
            $("div").mouseover(function(){
                $(this).append('<span style="color:#F00;">mouseover.</span>');
            }).mouseenter(function(){
                $(this).append('<span style="color:#00F;">mouseenter</span>');
            });
        });
    </script>
  </head>
  <body>
    <body>
     <div>java2s.com</div>
    </body>
</html>

Click to view the demo

The code above generates the following result.