使用 jQuery 在悬停时显示隐藏类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1449574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show hide class on hover using jQuery
提问by Brooke.
I am relatively new to jQuery, and I would like to be able to show a menu on mouseover.
我对 jQuery 比较陌生，我希望能够在鼠标悬停时显示菜单。
Here is the HTML content:
这是 HTML 内容：
<td class ="comment_div"> <?php echo("$comment_data['comment']); ?> <br/>
<span class="comment_actions"> Approve | Delete | Spam | Edit</span>
</td>
Then the jQuery code:
然后是jQuery代码：
$("comment_div").hover(
function() { $(".comment_actions").show(); },
function() { $(".comment_actions").hide(); }
);
This works except for I'm pulling multiple comments out and this only will show the menu on the first div no matter what "comment" is hovered. I would like to have the menu show only for the comment that is currently being hovered over. I think I need to use "$this" to make this work, but I am not sure how.
这有效，除了我拉出多个评论，并且无论悬停什么“评论”，这只会在第一个 div 上显示菜单。我想让菜单只显示当前悬停在上面的评论。我想我需要使用“$this”来完成这项工作，但我不确定如何。
回答by Kelly Gendron
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(); }
);
回答by Vince
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.
但是，您将面临的问题是将鼠标悬停在具有display: none; set. 您可能需要考虑将它包装在对鼠标敏感的东西中，然后显示/隐藏孩子。
