JQuery Mouse Over and Out

From CoderLearner
Jump to: navigation, search

jQuery Mouse Over and Out

Uses $.mouseover() and $.mouseout() function for mouse event actions.

Syntax

$(selector).mouseover(function(){});

$(selector).mouseout(function(){});


Mouse over

When mouse moves over the .sp3 class, it will display the alert.

  $('.sp3').mouseover(function(){
          alert('mouse over');
  });

Mouse out

When mouse moves out the .sp3, it will display the alert.

  $('.sp3').mouseout(function(){
                    alert('mouse out');
   });

<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"/>

$.on()

$("a.button").on('mouseenter',function(){
  $(this).animate({"marginTop": "0px"}, "fast");
});
$("a.button").on('mouseleave',function(){
  $(this).animate({"marginTop": "16px"}, "fast");
});