Tabs Hover Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

Hover over the Tabs to change them.



Code:
<p>Hover over the Tabs to change them.</p>
<div id=\"csstabs\">

<div id=\"tab1\" class=\"tabbox\">
<h3>Most Recent Posts</h3>
<ul class=\"tabcontent\">
<li><a href=\"http://mypost.io/post/google-resource-samples\" title=\"Google Resource Samples\">Google Resource Samples</a></li>
<li><a href=\"http://mypost.io/post/multimedia-samples\" title=\"Multimedia Samples\">Multimedia Samples</a></li>
<li><a href=\"http://mypost.io/post/navigation-menu-samples\" title=\"Navigation Menu Samples\">Navigation Menu Samples</a></li>
</ul>
</div><!--end #tab1//-->

<div id=\"tab2\" class=\"tabbox\">
<h3>Most Popular Posts</h3>

<ul class=\"tabcontent\">
<li><a href=\"http://mypost.io/post/resume-samples\" title=\"Resume Samples\">Resume Samples</a></li>
<li><a href=\"http://mypost.io/post/table-samples\" title=\"Table Samples\">Table Samples</a></li>
<li><a href=\"http://mypost.io/post/timeline-samples\" title=\"Timeline Samples\">Timeline Samples</a></li>
</ul>
</div><!--end #tab2//-->
<br class=\"clearboth\"/>

</div><!--end #csstabs//-->
CSS:
body{
font : 12px/1.5 Helvetica, Arial serif;
}
.clearboth{
clear:both;
}


#csstabs li{ padding:2px;}

#csstabs{ position:relative; width:300px; height:290px; }
#csstabs h3{ padding:5px; height:30px; text-align:center; cursor:hand; display:block; font-size:16px; font-weight:bold; margin:0;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}


.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
position:absolute;
left:0;
top:40px;
height:230px;
display:block;
margin:0;
}


#tab1 .tabcontent{
z-index:2;
background:#fff;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
cursor:hand;
background:#fff;
}


#tab2 .tabcontent{
z-index:1;
opacity:0;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
cursor:hand;
}

#csstabs:hover h3, #tabs:focus h3, #tabs:active h3{
background:none;
z-index:0;
}

#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{
z-index:0;
opacity:0;
-webkit-transition : opacity .75s ease-in;
}

#tab1:hover h3,#tab1:focus h3,#tab1:active h3{z-index:4;background:#fff;}
#tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}

#tab2:hover h3,#tab2:focus h3,#tab2:active h3{z-index:4;background:#fff;}
#tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}