Learning jQuery

In this post, I will show you a tip/trick to provide highlighting effect on mouseover and mouseout. For demo purpose, we will create a css class which will set the background color of element. This css class will be added to element on mouseover and it will be removed on mouseout. To achive this, we will be using mouseover and mouseout event and addclass() and removeClass() function provided by jQuery.

<style type="text/css">
.hover
{
    background-color:Silver;
}  
</style>

$(document).ready(function(){
   $('#tblData tr').mouseover(function(){
      $(this).addClass('hover');
   });
        
   $('#tblData tr').mouseout(function(){
      $(this).removeClass('hover');
   });
});

Above jQuery code will provide highlight effect on all the rows of table "tblData". As you see in code, we have used mouseover and mouseout events. On mouseover event, hover class is added to tr using addClass method and on mouseout event hover class is added to tr using removeClass method.

Feel free to contact me for any help related to jQuery. I will gladly help you.