JQuery Mouse Hover

From CoderLearner
Jump to: navigation, search

jQuery Mouse Hover

jQuery Mouse Hover Event Handler.

Syntax

  $(selector).hover(
	function(){ alert('one');}, // over
        function(){ alert('two');}  // out
   );

OR
   $(selector).hover(over,out);

Example 1

  • When mouse places over the Mouse Hover Test text, it calls the alert('one')
  • When moue out of the text, it calls alert('two')
<html>
    <head>
        <title>Hover 1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <script>
            $(document).ready(function(){
                $(".obmma").hover(function(){
                    alert('one');
                }, function(){
                    alert('two');
                });
            });
        </script>
    </head>

    <body>
        <div class="obmma">Mouse Hover Test</div>
    </body>
</html>

Example 2

Display a different text when mouser over or out.

<!DOCTYPE html>
<html>
   <head>
      <title>Contain</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('button#mybtn').hover(function(){
               $(this).text('Hide');
            }, function(){
               $(this).text('Show');                
            });
         });
      </script>
   </head>

   <body>
      <button id="mybtn">Show</button>
   </body>
</html>

Try It

Example 3

  • Need two images for this tutorial.
  • When mouse over the image, the image changes to a different image.
<!DOCTYPE html>
<html>
   <head>
      <title>Contain</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('img#mybtn').hover(function(){
               $(this).attr("src","hover_1.jpg");
            }, function(){
               $(this).attr("src","hover_2.jpg");                
            });
         });
      </script>
   </head>

   <body>
      <img src="hover_2.jpg" alt="My Picture Image" id="mybtn"/>
   </body>
</html>

Try It

Example 4

Mouse over the URL link dispalys a note after the URL link.

<html>
    <head>
        <title>URL LINK and Hover</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.min.js">
        </script>
        <style>
            #mycontent{
                width:150px;
                height:150px;
                background-color:blue;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $('.sp3').hover(
                function(){
                    $(this).append($("<span>Mark</span>"));
                },
                function(){
                    $(this).find("span:last").remove();
                }       
            );
                
            });
        </script>
    </head>

    <body>
        <a href="#" class="sp3">Link 1</a><br/>
        <a href="#" class="sp3">Link 2</a><br/>
        <a href="#" class="sp3">Link 3</a><br/>
        <a href="#" class="sp3">Link 4</a><br/>
    </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>