我有一张桌子,在我的表格行中,每一行都有一列,我想在鼠标悬停时显示图像并在悬停时隐藏。
这是我的表格代码。
<table cellpadding="0" cellspacing="0" border="0" class="display dTable">
<thead>
<tr>
<th style="width:5%;"> </th>
<th style="width:10%;">Estimate#</th>
<th style="width:20%;">Reference</th>
<th style="width:30%;">Customer Name</th>
<th style="width:15%;">Date</th>
<th style="width:10%;">Amount</th>
<th style="width:10%;">Status</th>
</tr>
</thead>
<tbody>
<tr class="gradeA">
<td class="context">
<a href="#" title="" class="smallButton" style="margin:5px;display:none;">
<img src="images/icons/dark/cog3.png" alt=""/>
</a>
</td>
<td align="center"><a href="#">EST-1</a></td>
<td align="center">Invoic 2,3</td>
<td align="center"><a href="#">Fahamco Distrubutions</a></td>
<td align="center">02-05-2012</td>
<td align="center">¥89800909</td>
<td align="center">pending</td>
</tr>
<tr class="gradeX">
<td class="context">
<a href="#" title="" class="smallButton" style="margin:5px;display:none;">
<img src="images/icons/dark/cog3.png" alt="" />
</a>
</td>
<td align="center"><a href="#">EST-1</a></td>
<td align="center">Invoic 2,3</td>
<td align="center"><a href="#">Fahamco Distrubutions</a></td>
<td align="center">02-05-2012</td>
<td align="center">¥89800909</td>
<td align="center">pending</td>
</tr>
</tbody>
</table>
每行的第一列中有一个anchor
带有图像的标签,最初是隐藏的,我想在鼠标悬停时为每个元素显示图像。
这是我尝试使用的 jquery 代码。
$('.context').hover(
function() {
$('.context a').show();
},
function() {
$('.context a').hide();
}
);
上面的代码显示了所有的锚标签,我想要的是只显示相应的元素。
还有一种方法可以在不使用<td>
元素中的 class 或 id 属性的情况下实现这一点。