blackmak
پنج شنبه 21 مهر 1390, 00:08 صبح
فایل jquery.js رو کنار این فایل قرار بدید.
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
#cont td
{
width:100px;
height:20px;
position:relative;
float:left;
z-index:10;
padding:3px;
}
#cont div
{
width:100px;
height:18px;
position:relative;
float:left;
z-index:20;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:14px;
padding:1px 1px 1px 2px;
}
.front
{
background-color:#5AB843;
width:100px;
height:18px;
float:left;
color:#FFF;
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:14px;
position:absolute;
left:3px;
top:3px;
z-index:5;
padding:1px 1px 1px 2px;
}
#cont
{
width:300px;
height:20px;
position:relative;
z-index:0;
}
</style>
<script type="text/javascript">
$(function()
{
$('#cont td').hover(function()
{
$(this).find('span').stop().animate(
{
width : "0px",
},300);
var value = $(this).find('span').html();
$(this).find('span').html('');
},function()
{
$(this).find('span').stop().animate(
{
width : "100px",
},300);
$(this).find('span').html(value);
});
});
</script>
<div id="cont">
<table width="431">
<tr bgcolor="#666666">
<td>
<div> Black</div>
<span class="front"> Black</span>
</td>
<td>
<div> Mak</div>
<span class="front"> Mak</span>
</td>
<td>
<div> Siamak</div>
<span class="front"> Siamak</span>
</td>
<td>
<div> Menu</div>
<span class="front"> Menu</span>
</td>
</tr>
</table>
</div>
موفق باشید