我正在尝试在悬停此网站的标题时显示一个菜单。
这是我的 jQuery:
$("#header").mouseover(function() {
$('#header_links').stop(true, true).show(400);
});
$("#header").mouseout(function() {
$('#header_links').stop(true, true).hide(400);
});
这是我的 HTML:
<body>
<div id="header">
<div id="header_title">leks kamihira </div>
<div id="header_links">
<a href="work.php">works</a>
<a href="bio.php">bio</a>
<a href="blog">blog</a>
<a href="links.php">links</a>
<?php
if (isset($_SESSION['logged_in'])) { ?>
<a href="admin">admin</a>
<a href="admin/logout.php">logout</a>
<?php } ?>
</div>
</div>
问题是，每当 header_title div 或 header_links div 也悬停在上方时，header_links 就会消失。
有没有办法确保只要 div 包含在主标题 div 中，mouseover 和 mouseout 就可以正常运行？
最佳答案
你可以使用 mouseenter() 和 mouseleave() :
$("#header").mouseenter(function() {
$('#header_links').stop(true, true).show(400);
});
$("#header").mouseleave(function() {
$('#header_links').stop(true, true).hide(400);
});
Here's a nice simple demo显示 mouseover() 和 mouseenter() 之间的区别。
你也可以使用它，正如 @PSL 提到的:
$("#header").on('mouseenter mouseleave',function() {
$('#header_links').stop(true, true).toggle(400);
});
关于javascript - 菜单的 Jquery mouseover mouseout 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16701452/