Question

对于问题标题感到抱歉，我真的不知道如何总结一下简短说明。

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

现在，当我将鼠标悬停在元素上时，我希望它将购物篮从display:none更改为display:block，使其可见。但是使用我的代码，只要我离开悬停元素就可以点击某个项目。下拉列表消失，因为我不再悬停在我在jQuery悬停函数中定义的元素上。

例如（快速虚拟代码）

$('.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

悬停语法看起来像这样.. $（selector）.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/

jQuery - 在悬停时保持div可见

2 个答案: