1

我正在尝试在此网站上的标题悬停时显示菜单。

这是我的 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&nbsp;</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_titlediv 或header_linksdiv 也悬停在上面，就会header_links消失。

有没有办法确保只要 div 包含在主标题 div 中，mouseover 和 mouseout 就可以正常工作？

4

1 回答 1

4

您可以使用mouseenter()和mouseleave()：

$("#header").mouseenter(function() {
    $('#header_links').stop(true, true).show(400);
});

$("#header").mouseleave(function() {
    $('#header_links').stop(true, true).hide(400);
});

jsFiddle在这里。

这是一个很好的简单演示mouseover()，显示和之间的区别mouseenter()。

@PSL如前所述，您也可以使用它：

$("#header").on('mouseenter mouseleave',function() { 
   $('#header_links').stop(true, true).toggle(400); 
});
于 2013-05-22T21:01:20.717 回答