Jquery mouseleave/mouseout 和 z-index答案

【问题标题】：Jquery mouseleave/mouseout and z-indexJquery mouseleave/mouseout 和 z-index
【发布时间】：2012-08-18 05:53:40
【问题描述】：

tt我有这样的导航：

<ul>
   <li><a href='#'>Menu title 1</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
   <li><a href='#'>Menu title 2</a>
      <ul>
         <li><a href='#'>Submenu title 1</a></li>
         <li><a href='#'>Submenu title 2</a></li>
         <li><a href='#'>Submenu title 3</a></li>
      </ul>
   </li>
...

然后使用 jquery，我将悬停菜单项的 z-index 设置为与子菜单一样高，并淡入子菜单元素。因此，悬停的菜单项元素在子菜单上可见，所有其他菜单项都在子菜单下。

现在我需要为子菜单设置鼠标事件 - mouseleave => 隐藏子菜单。问题：由于菜单项现在位于子菜单上 - 如果鼠标停留在子菜单上但悬停在菜单项 1 上，jquery 将其理解为子菜单的 mouseleave

这对我来说是很常见的问题，我总是使用某种“秘籍”，但我认为必须有一个简单的解决方案。

我不提供完整的源代码，但我不要求你提供工作代码，我只是需要一些想法。希望得到帮助，谢谢。

【问题讨论】：

你的 Javascript 代码在哪里？
会有帮助吗？这是我对这个常见问题的解决方案：stackoverflow.com/questions/12024666/…
dystroy，谢谢，但这是我称之为“秘籍”的东西，我正在寻找一些简单的解决方案。其他人：js 很简单——mouseenter——显示子菜单，mouseleave——隐藏子菜单。其他一切都是关于设置和取消可视化类。

标签： jquery z-index mouseout mouseleave

【解决方案1】：

这是使用纯 CSS 进行设置的一种方法：

http://jsfiddle.net/mblase75/nr8xZ/

诀窍是将:hover 样式应用到仅在列表项悬停时才显示它们的子菜单。由于子菜单也是父列表项的一部分，只要鼠标悬停在子菜单上，它就会一直显示。如果需要，您仍然可以向链接和/或列表项添加额外的 jQuery/JavaScript 交互性。

【讨论】：

【解决方案2】：

使用纯 CSS 菜单，更有效且无 JS。您可以使用此编辑器在线生成您的 pureCSS 菜单。

http://purecssmenu.com/

这也是解释纯 CSS 菜单背后的基础知识的指南。

http://meyerweb.com/eric/css/edge/menus/demo.html

如果您需要带有效果的 JQuery 和 CSS 的解决方案，本教程将为您提供帮助。

http://www.instantshift.com/2010/07/16/create-simple-dropdown-menu-using-jquery/

希望这会有所帮助。

【讨论】：

请查看教程链接的修正答案。我在最初阶段使用本教程来开发我的网站，现在我经常使用纯 CSS 菜单。希望这能解决您的问题。