Table Design with Icons on Hover using CSS & jQuery

Last modified on by Karthikeyan K

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
var c = confirm("Continue delete?");
return false;

// Show aciton upon row hover
jQuery('.table tbody tr').hover(function(){
jQuery(this).find('.table-action-hide a').animate({opacity: 1});
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;
border:1px solid #ccc;
table.zebra-style th {
color: #444;
font-size: 13px;
font-weight: normal;
padding: 10px 8px;
table.zebra-style td {
color: #777;
padding: 8px;
table.zebra-style tr.odd {
.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

You May Also Like

1 Response

  1. Neocsatornaja says:

    The edit dosen’t work in live.
    Please check this!

Leave a Reply

Your email address will not be published. Required fields are marked *