1

我有以下 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 只显示悬停的链接，但它不起作用。我不确定我是否在错误的地方或错误的上下文中使用它。（我假设这个，这里使用的是指悬停在什么上面？

谁能指出我正确的方向？

谢谢

4

3 回答 3

1

首先，你需要一些有效的标记，jQuery 不能总是在奇怪的无效标记中找到元素？

<table>
    <tr>
       <td>text</td>
       <td><a href="#">text</a></td>
       <td class="productPopUp">
          <h1>text</h1>
          <p>blah, blah</p>                          
       </td>
    </tr>
    <tr>
    <td>text</td>
         <td><a href="#">text</a></td>
         <td class="productPopUp">
           <h1>text</h1>
           <p>blah, blah</p>                           
         </td>
    </tr>
​&lt;/table>​​​​​​​​​​

然后是一些 jQuery，可能是这样的：

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

最后是一个小提琴

于 2012-04-26T15:23:13.093 回答
0 
$('td a').hover(function(){
  $(this).parent().next('div.productPopUp').show();
});
于 2012-04-26T14:55:38.450 回答
0

也许这个？

$('td a').hover(function(){
  $(this).parent().sibling('div.productPopUp').show();
});
于 2012-04-26T15:00:19.977 回答