Question

我对JQuery相对较新，我希望能够在鼠标悬停时显示菜单。

这是html

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

然后是JQuery

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

这个作品是因为我拉出了多个评论，这只会显示第一个div上的菜单，无论“评论”是什么。我想仅针对当前悬停的评论显示菜单。我想我需要使用“$ this”来完成这项工作但不确定如何。

感谢。

Answer 1

如果我正确阅读格式应该是 -

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

编辑，因为我是一个完全白痴。

Answer 2

这样的事情对我有用：

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

然而，您将面临的问题是将悬停操作覆盖在具有display：none的div上;组。您可能需要考虑将其包装在鼠标敏感的内容中，然后再显示/隐藏子项。

JQuery在悬停时显示隐藏类

2 个答案: