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!