0
我想在鼠標懸停時顯示位於每個table row
上的div。因此,懸停的table row
的div.tools
將在懸停時顯示和隱藏。在鼠標懸停表格行上顯示/隱藏Div
這是我的桌子。
<table width="99%" cellspacing="0" cellpadding="2" class="main-box">
<tbody><tr class="dataTableHeadingRow">
<td class="dataTableHeadingContent">Categories/Products</td>
<td class="dataTableHeadingContent" align="right">Action </td>
</tr>
<tr id="product_37">
<td class="dataTableContent">
<a href="#">Cotton Piqué Tennis Shirt</a>
<div class="tools" style="display:none;">Tools Here</div>
</td>
<td class="dataTableContent" align="right">
<img src="#/images/icon_arrow_right.gif" border="0" alt="">
</td>
</tr>
<tr id="product_39">
<td class="dataTableContent">
<a href="#">Leather Plus Cotton Cut-Out Sling Back Sandal</a>
<div class="tools" style="display:none;">Tools Here</div>
</td>
<td class="dataTableContent" align="right">
<a href="#"><img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>
</td>
</tr>
<tr id="product_38">
<td class="dataTableContent">
<a href="#">Poly-Cotton 3/4 Sleeve Raglan Shirt</a>
<div class="tools" style="display:none;">Tools Here</div>
</td>
<td class="dataTableContent" align="right">
<a href="#">
<img src="#/images/icon_info.gif" border="0" alt="Info" title=" Info "></a>
</td>
</tr>
</tbody>
</table>
我試過這個jquery函數,但它不工作。
jQuery(function() {
jQuery('*[id^=product_]').hover(function(){
jQuery(this).children("div.tools").show();
},function(){
jQuery(this).children("div.tools").hide();
});
});
});
嘗試,但還沒有工作。 http://jsfiddle.net/rDThB/ – Ken 2012-08-05 02:15:40
這不起作用,因爲你也有一個語法錯誤:你有一個額外的關閉'});'。對不起,我一開始沒有注意到。試試這個:http://jsfiddle.net/nnnnnn/rDThB/1/(注意在你的小提琴中,如果你按下「整理」按鈕,它會修正縮進並使語法錯誤更明顯,但是如果你檢查瀏覽器的JS控制檯顯示錯誤。) – nnnnnn 2012-08-05 02:25:45