jQuery - 关于悬停让div可见

Question

对于问题标题，我真的不知道如何总结它的简短描述。

基本上我有一个<ul>它有我的导航链接。但是，其中一个<li>链接是我的自定义下拉菜单购物篮，可以让用户预览其项目。

现在，当我将鼠标悬停在元素上时，我希望它将该篮子从display:none更改为display:block，使其可见。但随着我的代码，只要我离开悬停元素点击一个项目。下拉菜单消失了，因为我不再徘徊在我在jQuery hover函数中定义的元素上。

例如（快速虚设码）

$('.hover-on-me').hover(function(){ 
    $('.hover-open').show(); 
},function(){ 
//This right here hides the dropdown 
    $('.hover-open').hide(); 
}); 

现在我不使用Javascript/jQuery的赌注。我试图在函数中说，如果鼠标仍然在导航栏上，不要隐藏它，或者如果鼠标在购物篮上，那么不要隐藏它。我认为这会让我从悬停元素移出，经过导航栏并进入下拉菜单，但不起作用。因为当我离开该区域时，元素保持打开并且不会关闭。

Here is a simple jsfiddle显示我的问题。

谢谢！

Answer 1

我认为你的班级名字只有一个错误。

jQuery代码： -

$('.hover-on-me').hover(function(){ 
     $(this).parent("li").addClass("active"); 
}, function(){ 
    $(this).parent("li").removeClass("active"); 
}); 

一下添加到您的CSS代码： -

ul li.active{display:inline-block;} 
ul li.active .hover-open, ul li .hover-open:hover{display:block;} 

能否请您尝试这些。

Answer 2

悬停语法看起来是这样.. $（选择）.hover（inFunction，outFunction） 并试图修改这样的脚本..

$('.hover-on-me').hover(
function(){ 
$('.hover-open').show(); 
}, 
function(){ 
if(!$('ul').is(":hover") || !$('.hover-open').is(":hover")){ 
    $('.hover-open').hide(); 
} 
} 
); 

OR 用鼠标事件函数..

$(".hover-on-me") 
    .mouseenter(function() { 
    $('.hover-open').show(); 
}); 

$(".hover-open") 
.mouseleave(function() { 
$('.hover-open').hide(); 
}); 

进一步详情，请参阅这里.. https://api.jquery.com/hover/#hover2和https://api.jquery.com/category/events/mouse-events/