保持在悬停时显示div打开

Question

我有一个链接，当它展开时，它显示链接之外的另一个div，当我将鼠标移动到新显示的div时，我需要它保持。目前只要焦点脱离链接，移动显示的div就会消失。

一定是在肯定很简单，这里是我在莫：

$('a.tel').hover(function() { 
    $('.phonePanel').fadeToggle().addClass('show'); 
}); 

Answer 1

如果我理解正确你的问题，这应该帮助。

小提琴：http://jsfiddle.net/3y6yjk3y/

var hoverTimeout, keepOpen = false, stayOpen = $('.stay-open'); 
$(document).on('mouseenter','.trigger',function(){ 
    clearTimeout(hoverTimeout); 
    stayOpen.addClass('show'); 
}).on('mouseleave','.trigger',function(){ 
    clearTimeout(hoverTimeout); 
    hoverTimeout = setTimeout(function(){ 
     if(!keepOpen){ 
      stayOpen.removeClass('show'); 
     } 
    },1000); 
}); 

$(document).on('mouseenter','.stay-open',function(){ 
    keepOpen = true; 
    setTimeout(function(){ 
     keepOpen = false; 
    },1500); 
}).on('mouseleave','.stay-open',function(){ 
    keepOpen = false; 
    stayOpen.removeClass('show'); 
}); 

Answer 2

不完全知道你正在寻找的，但这里是一些快速的代码，显示一个div并保持可见，直到你将鼠标悬停在该div上，然后退出。不知道你在演示课上做了什么，所以我将它加入了示例中，但实际上它并没有在我的示例中做任何事情。

我相信你的问题是，你通过一个处理程序，并根据jQuery文档，当你传递一个处理程序到hover它在悬停和悬停出来运行。

https://api.jquery.com/hover/#hover-handlerInOut

从文档：

的.hover（）方法中，当通过一个单一的功能，将执行该处理程序 两者的mouseenter和鼠标离开事件。这允许 用户在处理程序中使用jQuery的各种切换方法，或者根据event.type在处理程序中以不同方式响应。

在我的示例中，您可以看到给出一个或两个处理程序的示例。

小提琴：http://jsfiddle.net/x4fo4zkk/

HTML：

<a id="show">show more</a> 
<div id="more">here is more</div> 

CSS：

div { 
    background: red; 
    height: 100px; 
    width: 100px; 
    display: none; 
} 

JS：

$('#show').hover(
    function() { 
     $('#more').fadeIn(); 
    } 
); 

$('#more').hover(
    function() { 
     $(this).addClass('show'); 
    }, 
    function() { 
     $(this).removeClass('show').fadeOut(); 
    } 
); 

Answer 3

这可以纯粹用CSS做，如果你可以包括体周围的包装。或者，如果它必须是jQuery，封装程序无论如何都会有所帮助。

HTML

<div class="phoneWrapper"> 
    <a class="tel">show more</a> 
    <div class="phonePanel">here is more</div> 
</div> 

CSS：

.phonePanel { display:none; } 
.phoneWrapper:hover .phonePanel { display:block } 

jQuery的替代方案：

$('.phoneWrapper').on('mouseenter', function() { 
    $(this).children('.phonePanel').addClass('show'); 
}); 

$('.phoneWrapper').on('mouseleave', function() { 
    $(this).children('.phonePanel').removeClass('show'); 
}); 

小提琴这里：http://jsfiddle.net/v3txspx9/