使用jQuery在悬停时显示隐藏类

Posted 2021-03-27

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

这是有效的，除了我要拉出多个注释之外，无论悬停了什么“注释”，这只会在第一格显示菜单。我只想让菜单显示当前悬停的注释。我想我需要使用“ $ this”来完成这项工作，但是我不确定如何。

答案

如果我没看错的话，格式应该是-

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

另一答案

类似这样的东西对我有用：

<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; set的div上。您可能要考虑将其包装在对鼠标敏感的东西中，然后显示/隐藏子项。