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.

Table With Actions on Hover

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

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2014/03/jquery-table.gifhttp://w3lessons.info/wp-content/uploads/2014/03/jquery-table-150x150.gifKarthikeyan KCSS3FreebiesjqueryCSS3,Jquery,table design
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...