mouseover() event

Syntax


.mouseover(handler)      
.mouseover()

handler: A function to execute each time the event is triggered

Return value

The jQuery object, for chaining purposes.

Description

Bind an event handler to the mouseover JavaScript event, or trigger that event on an element.

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

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


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

Mouse over

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/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>');
            }).mouseenter(function(){
                $(this).append('<span style="color:#00F;">mouseenter</span>');
            });
        });
    </script>
  </head>
  <body>
    <body>
     <div>adsf</div>
    </body>
</html>

Click to view the demo

Make a rollover effect by chaining two event shortcuts, mouseover and mouseout:

 
<html> 
    <head> 
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script> 
        <script> 
            $(function(){ 
                $("#text").mouseover(function(){ 
                    $(this).css("text-decoration","underline"); 
                }).mouseout(function(){ 
                    $(this).css("text-decoration","none"); 
                }); 
            }); 
        </script> 
    </head> 
    <body> 
        <p id="text">I go no where</p> 
    </body> 
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: