在鼠标悬停表格行上显示/隐藏Div
问题描述:
我想在鼠标悬停时显示位于每个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();
});
});
});
答
使用.find()
而不是.children()
。
你使用的.children()
method只发现直接的孩子,在你的tr元素的情况下,将是tds。
.find()
method看起来在所有的后代,所以它会在tds里面找到你的div。
您还遇到了一个语法错误,它会阻止您的代码正常工作:应该删除的结尾处还有一个额外的关闭});
。
此外,而不是选择在使用*
所有元素,它可能是更有效的选择只是表中的TR元素:
jQuery(function() {
jQuery('table.main-box tr[id^=product_]').hover(function() {
jQuery(this).find("div.tools").show();
}, function() {
jQuery(this).find("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