Question

我有一个链接，当它悬停时它显示链接之外的另一个div，当我将鼠标移动到新显示的div时，我需要它留下来。当焦点离开链接时，通过移动显示的div当然会消失。

当然要非常简单，这就是我在mo的所作所为：

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

Answer 1

不完全确定你在寻找什么，但这里有一些快速代码显示div并保持可见，直到你将鼠标悬停在该div上然后退出。我不确定你在该节目类中做了什么，所以我在示例中添加了它，但它在我的例子中实际上并没有做任何事情。

我相信你的问题是你传递了一个处理程序，并且根据jQuery文档，当你将一个处理程序传递给hover时，它会在悬停时运行并暂停。

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

来自docs：

.hover（）方法在传递单个函数时将执行该方法 mouseenter和mouseleave事件的处理程序。这允许用户在处理程序中使用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 2

如果我理解你的问题，这应该会有所帮助。

小提琴：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 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/

在悬停时保持显示div打开

3 个答案: