Question

基本上我需要将鼠标悬停在一个锚点上以显示“data-meta”div。工作得很好但是当有多个td和div时，一个悬停显示所有这些。我的问题是如何单独显示/隐藏它们？代码片段如下。

<td>
<a href="#">Item</a>
<div class="data-meta">
    <a href="#">Edit</a> | <a href="#">Disable</a> | <a href="#">Delete</a>
</div>

 $(document).ready(function(){        
    $("td").hover(
        function () {
        $('.data-meta').show();
        },
        function () {
        $('.data-meta').hide();
    });
});

Answer 1

只需将context传递给您的选择器：

$(function() {
 $('td').hover(
  function() {
   $('.data-meta', this).show();
   // Other cool stuff goes here
  },
  function () {
   $('.data-meta', this).hide();
   // Other cool stuff goes here
  }
 );
});

Answer 2

要将偶数附加到单个<td>，最简单的方法是添加ID：<td id="menutd">然后在附加活动时使用$('td#menutd')。

在此特定示例中，$('.data-meta')会在文档中找到所有class='data-meta'，您只能在匹配的td内搜索$('.data-meta', this)。第二个参数（this）定义了要在其中搜索的元素... jQuery事件处理程序始终将this设置为事件触发的元素。

Answer 3

您的选择器实际上是抓取所有TD而不是特定项目。我会给href一个ID和目标，你也可以使用切换调用。

<td>
<a href="#" id="hide-show">Item</a>
<div class="data-meta">
    <a href="#">Edit</a> | <a href="#">Disable</a> | <a href="#">Delete</a>
</div>

$(document).ready(function(){        
    $("#hide-show").hover(
        function () {
        $('.data-meta').toggle();
        });
});

Answer 4

问题是$("td")会影响文档中的每个td。如果您想单独控制它，请尝试以下方法：

<td onmouseover="$('.data-meta', this).show();" onmouseout="$('.data-meta', this).hide();">
<a href="#">Item</a>
<div class="data-meta">
    <a href="#">Edit</a> | <a href="#">Disable</a> | <a href="#">Delete</a>
</div>

JQuery：悬停以显示/隐藏单个对象

4 个答案: