Question

我正试图在这个网站上悬停一个标题时显示一个菜单。

这是我的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_title div或header_links div也悬停，header_links消失。

有没有办法确保只要div包含在主标题div中，mouseover和mouseout功能正确？

Answer 1

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

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

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

jsFiddle here.

Here's a nice simple demo显示mouseover()和mouseenter()之间的差异。

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

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

Jquery mouseover mouseout问题的菜单

1 个答案: