JQuery Show hide class on hover

Question

Hello,

I am relatively new to JQuery and I would like to be able to show a menu on mouseover.

Here is the html

<td class ="comment_div"> <?php echo("$comment_data['comment']); ?> <br/>  
   <span class="comment_actions"> Approve | Delete | Spam | Edit</span>  
</td>

Then the JQuery

 $("comment_div").hover(
      function() { $(".comment_actions").show(); },
      function() { $(".comment_actions").hide(); }
 );

This works exept for I'm pulling multiple comments out and this only will show the menu on the first div no matter what "comment" is hoverd. I would like to to have the menu show only for the comment that is currently being hoverd over. I think I need to use "$this" to make this work but not sure how.

Thanks.

Answer 1

If i'm reading that correctly the format should be-

$(".comment_div").hover(
  function() { $(this).children(".comment_actions").show(); },
  function() { $(this).children(".comment_actions").hide(); }
);

Edit because i'm a complete idiot.

Answer 2

Something like this works for me:

<script>
$(document).ready(function() {
$(".container").hover(
      function() { $(this).children('.comment_actions').show(); },
      function() { $(this).children('.comment_actions').hide(); }
 );

});

</script>

<style>

</style>


<table border="1"><tr>
<td class ="container"><br/>  
   asd<span class="comment_actions">Approve | Delete</span>  
</td>
<td class ="container"><br/>  
  asd <span class="comment_actions">Approve | Delete</span>  
</td>
<td class ="container"><br/> 
  asd<span class="comment_actions"> Approve| Delete</span>  
</td>
</tr></table>

However, the issue you'll face is hover actions over a div that has display: none; set. You might want to consider wrapping it in something that's mouse sensitive, and then displaying/hiding children instead.