.mouseover()

In this chapter you will learn:

Syntax and Description for .mouseover() event
How to listen to mouse over event
How to change style for mouse over event

Syntax and Description

.mouseover(handler)      
.mouseover()

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

mouseover binds 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();
});

Listen to mouse over event

The following code adds handler for mouse over event.

<html><!-- j  a  v  a 2 s .com-->
  <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>');
            }).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

Style and mouse over event

The following code makes a rollover effect by chaining two event shortcuts, mouseover and mouseout:

<html> <!--  ja va2  s  .c o  m-->
    <head> 
        <script src="http://java2s.com/style/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

Next chapter...

What you will learn in the next chapter: