Table Design with Icons on Hover using CSS & jQuery
By 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!