2012-08-05 187 views
0

我想在鼠標懸停時顯示位於每個table row上的div。因此,懸停的table rowdiv.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(); 
    }); 
}); 
}); 

回答

3

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

嘗試,但還沒有工作。 http://jsfiddle.net/rDThB/ – Ken 2012-08-05 02:15:40

+1

這不起作用,因爲你也有一個語法錯誤:你有一個額外的關閉'});'。對不起,我一開始沒有注意到。試試這個:http://jsfiddle.net/nnnnnn/rDThB/1/(注意在你的小提琴中,如果你按下「整理」按鈕,它會修正縮進並使語法錯誤更明顯,但是如果你檢查瀏覽器的JS控制檯顯示錯誤。) – nnnnnn 2012-08-05 02:25:45

相關問題