在鼠标悬停表格行上显示/隐藏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&nbsp;</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="">&nbsp; 
    </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>&nbsp; 
    </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>&nbsp; 
    </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(); 
    }); 
}); 
});

来源

2012-08-05 Ken

使用.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(); 
    }); 
});

来源

2012-08-05 02:13:23 nnnnnn

尝试，但还没有工作。 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

在鼠标悬停表格行上显示/隐藏Div

回答

相关问题