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;

}