Table Design with Icons on Hover using CSS & jQuery

Today I am going to discuss about how to design a simple table with displaying icons on Hover using CSS & jQuery.

I have used jQuery with a hover() mouse event to allow attach two event handlers to the matched elements, executed when the mouse enters and leaves the matched elements.

I hope this tutorial will help you to add cool User Interface to your web projects. You can see this kind of effects in big sites like facebook, twitter & linkedIn.

jQuery Code

jQuery(document).ready(function() {
    // Delete row in a table
    jQuery('.delete-row').click(function(){
      var c = confirm("Continue delete?");
      if(c)
        jQuery(this).closest('tr').fadeOut(function(){
          jQuery(this).remove();
        });
        return false;
    });

    // Show aciton upon row hover
    jQuery('.table tbody tr').hover(function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 1});
    },function(){
      jQuery(this).find('.table-action-hide a').animate({opacity: 0});
    });
});

CSS code to Display Icons on Hover

table.zebra-style {
	font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	text-align:left;
	border:1px solid #ccc;
	margin-bottom:25px;
	width:70%
}
table.zebra-style th {
	color: #444;
	font-size: 13px;
	font-weight: normal;
	padding: 10px 8px;
}
table.zebra-style td {
	color: #777;
	padding: 8px;
	font-size:13px;
}
table.zebra-style tr.odd {
	background:#f2f2f2;
}
.table-action {
	text-align: center;
}
.table-action-hide a {
	opacity: 0;
}
.table-action a, .table-action-hide a {
	display: inline-block;
	margin-right: 5px;
	color: #666;
}
.table-action a:hover, .table-action-hide a:hover {
	color: #333;
}
.table-action a:last-child, .table-action-hide a:last-child {
	margin-right: 0;
}

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!

View Live Demo Download