JQuery: Hover to show/hide individual object

Basically I need to hover over an anchor to display the "data-meta" div. Works just fine but when there's开发者_运维技巧 multiple td and divs, one hover displays all of them. My question is how can I show/hide them individually? Code snippets below.

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

Just pass a context to your selector:

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

To attach the even only to a single <td> it would be easiest to add an ID: <td id="menutd"> then use $('td#menutd') when attaching your event.

In this particular example, the $('.data-meta') will find all class='data-meta' in the document, you can make it search only within the matched td by making it $('.data-meta', this) instead. The second parameter (this) defines an element to search within... jQuery event handlers always have this set as the element that the event is triggering on.

Your selector is actually grabbing all TD's as opposed to the specific item. I would give the href an ID and target that, you also can use the toggle call instead.

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

The problem is $("td") affects every single td in the document. If you want to control this individually, try something like this:

<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>