JQuery: hover over show / hide individual object

Question

Basically, I need to hover over the anchor to display div-data-meta. Works fine, but when there are multiple td and divs, one hover displays them all. My question is: how can I show / hide them individually? The following are snippets of code.

<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 to the 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 an even to only one <td>, it would be easier to add an identifier: <td id="menutd">and then use it $('td#menutd')when attaching your event.

$('.data-meta') class='data-meta' , td, $('.data-meta', this). (this) ... jQuery this , .

Answer 3

Your selector actually captures the entire TD, not a specific element. I would give href an id and a target, you can also use a switch 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 $("td")affects every single td in the document. If you want to control this separately, 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>