保持div打开，直到鼠标离开div

我有一个div，当链接hover时出现，问题是我希望div在鼠标hover在屏幕上并且只在mouseout上消失。

我无法让它工作，几乎一旦我将鼠标从链接上移开，div就会消失

任何有关这方面的帮助将不胜感激，我的代码如下

$(document).ready(function () { $(".flyout").hide(); $("#Products").hover(function () { $("#productList ").show(); }), $(".flyout").mouseenter(function () { $("#productList ").show(); }); $(".flyout").mouseleave(function() { $(" #productList").hide(); }); }); 

 .hidden { display: none; } .container { background-color: red; } .flyout { position: absolute; width: 900px; min-height: 450px; background: white; overflow: hidden; z-index: 10000; border-radius: 5px; border: 1px solid #E9ECEF; box-shadow: 2px 2px 2px gray; background-color:red; } 

  
 
Text
 
 
 
 
 
Content
 
 
 Content 
 
 Content 
 
 Content 
 
 Content 
 
 
 
 
Content
 
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
Content
 
 
 
  

谢谢大家的帮助，这是一个我无法看到的愚蠢错误。 我已修改代码以显示它现在可以按我的意愿工作。

Answer 1

你必须将.hidden添加到class="container flyout" ，然后这样做：

 $(function hoverInit() { $('ul li a').mouseenter(function() { $('.flyout').removeClass('hidden') }) $('ul li a').mouseleave(function() { $('.flyout').addClass('hidden') }) }) 

 .hidden { display: none; } .container { background-color: red; } 

   
 
Text
 
 
 Content goes here