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

Posted 2023-05-08

【中文标题】使用 jQuery 在悬停时显示隐藏类

【英文标题】：Show hide class on hover using jQuery

【发布时间】：2010-11-29 19:00:35

【问题描述】：

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

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

【参考方案1】：

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

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

【讨论】：

不会显示/隐藏“comment_div”吗？我正在尝试在悬停时显示/隐藏“comment_actions”。

你说得对——我今天半睡半醒，没有练习。那应该现在就解决了。

太棒了！- 再次为那里的失误感到抱歉。

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