JQuery: Hover to show/hide individual object

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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>