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