jQueryの、これは一つの要素に

Question

を表示するために、私は次のjQuery

$('td a').hover(function(){ 
    $(this).find('div.productPopUp').show(); 
}); 

このHTML

<td>text</td> 
    <td><a href="#">text</a></td> 
    <div class="productPopUp"> 
    <h1>text</h1> 
    <p>blah, blah</p>       
    </div> 
<td> 

<td>text</td> 
    <td><a href="#">text</a></td> 
    <div class="productPopUp"> 
     <h1>text</h1> 
     <p>blah, blah</p>       
    </div> 
<td> 

を持っている私は、jQueryのが唯一のホバーリンクを表示したいが、それは動作しません。私が間違った場所や間違った状況でこれを使用しているかどうかはわかりません。誰もが正しい方向に私を指すことができますか？

上で推移しているものも呼ば（私はここで使用する、このことを前提と？

おかげ

Answer 1

$('td a').hover(function(){ 
    $(this).parent().next('div.productPopUp').show(); 
}); 

Answer 2

多分これ？

$('td a').hover(function(){ 
    $(this).parent().sibling('div.productPopUp').show(); 
}); 

Answer 3

ファーストを無効なマークアップが必要な場合は、jQueryが奇妙な無効なマークアップで要素を見つけられるとは限りません。

その後

いくつかのjQuery、多分このような何か：

$('td a').on('mouseenter mouseleave', function() { 
    $(this).parent().parent().find(".productPopUp").toggle(); 
}); 

そして最後にFIDDLE