Jquery mouseover mouseout issue for a menu

Jquery mouseover mouseout issue for a menu

本文关键字：menu for issue mouseover mouseout Jquery      更新时间：2023-09-26

我试图有一个菜单显示在这个网站的标题悬停。

这是我的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内，鼠标悬停和鼠标离开功能正确?

您可以使用 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); 
});
相关文章：