How to highlight on mouseover using 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.
See live Demo and Code
Feel free to contact me for any help related to jQuery. I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..