In this post, we’ll highlight table row on hover. Here’s how it will work: Highlight the table row on hover. Show its original color on mouse out.
Just add the following JavaScript code before the </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script type='text/javascript'>
$(document).ready(function(){
//we will select the odd and even row
//to highlight it on mouse over
$('.odd-row, .even-row').hover(
function () {
$(this).css('background-color', '#CFF');
},
function () {
//then get the class name to identify
//and show its original color
var c_name = $(this).attr('class');
if(c_name == 'odd-row'){
$(this).css('background-color', '#E3E3E3');
}else if(c_name == 'even-row'){
$(this).css('background-color', '#D1D1D1');
}
}
);
});
</script>
That’s it! :)
