jQuery显示/隐藏面板，然后将鼠标hover在面板内的内容上

我有一个项目列表，如果项目列表项目hover在上面，我想显示一个相关的面板。 我已经有了它的工作，但问题是，当我使用mouseleave函数时，由于显而易见的原因，一旦我徘徊在链表项目上，我就不能将鼠标hover在面板内的内容上。

我已经在这几天了，并且无法弄清楚需要做什么来保持相关面板打开的逻辑，所以我可以将鼠标hover在它上面并点击其中的更多阅读链接。

我尝试在面板上添加一个关于hover状态的类，但这似乎也没有用。

我的HTML是：

 
 
 
Item 1 
 
Item 2 
 
 
 
 
This is panel 1!
 read more 1... 
 
 
This is panel 2!
 read more 2...  

我的基本jQuery是：

 $('#item-1').mouseenter(function () { $('#panel-1.panel').toggle(); }); $('#item-1').mouseleave(function () { $('#panel-1.panel').toggle(); }); $('#item-2').mouseenter(function () { $('#panel-2.panel').toggle(); }); $('#item-2').mouseleave(function () { $('#panel-2.panel').toggle(); }); 

…然后我有一些CSS，其中面板设置为display: none开始。 请注意，如果两个列表项链接都没有hover，那么如果在此之前已打开一个面板，则面板应该消失。

这里的小提琴演示……

Answer 1

在我看来，唯一真正的方法是将隐藏的元素包装在您正在hover的元素中，以便mouseleave事件可以绑定到包装器。

链接更新： 这是一个小提琴

我还在元素上使用数据属性来跟踪要打开的面板。 这样，您只需要以下代码：

 $('#item-wrapper a').mouseenter(function (e) { if ($(this).data('panel')) { $('.panel').hide(); $('#' + $(this).data('panel')).show(); } }); $('#item-wrapper').mouseleave(function () { $('.panel').hide(); }); 

编辑：添加条件以确保面板中的锚标签不会触发hover事件。

Answer 2

几件事：

1. 用户在li上使用hover事件处理程序，而不是a 。
2. 这允许您将内容移动到li ，因此将鼠标hover在内容上意味着您仍然将鼠标hover在其父级上。

jQuery ：

 $('#item-1').parent().hover(function () { $('#panel-1.panel').toggle(); }); $('#item-2').parent().hover(function () { $('#panel-2.panel').toggle(); }); 

叉子jsFiddle