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

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

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

来源

2010-05-10 noe ruiz

只是传递一个context您选择：

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

来源

2010-05-10 21:30:26

@James：的确如此。 '$（'。class'，this）;'与$（this）.find（'。class'）;'实际上是一样的。 – 2010-05-12 11:11:14

要附加的甚至只有一个单一的<td>这将是最容易添加ID：<td id="menutd">然后使用$('td#menutd')附加您的活动时。

在这个特殊的例子中，$('.data-meta')会发现文档中的所有class='data-meta'，你可以把它通过使$('.data-meta', this)而不是只在匹配搜索td。第二个参数（this）定义了要在...内搜索的元素... jQuery事件处理程序始终将this设置为事件触发的元素。

来源

2010-05-10 21:31:42 gnarf

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

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

来源

2010-05-10 21:32:33 fafnirbcrow

问题是$("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>

来源

2010-05-10 21:37:35

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

回答

相关问题