jquery 悬停时保持显示的div打开

fgw7neuy  于 2023-06-29  发布在  jQuery
关注(0)|答案(3)|浏览(129)

我有一个链接,当悬停它显示另一个div外的链接,当我移动鼠标到新显示的div我需要它留下来。目前,只要焦点通过移动到显示的div而离开链接,它当然会消失。
这真的很简单,这是我在MO上的东西:

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

lztngnrs1#

不完全确定你在找什么,但这里有一些快速代码,显示一个div,并保持可见,直到你悬停在该div上,然后退出。我不知道你用show类做了什么,所以我在示例中添加了它,但它在我的示例中实际上没有做任何事情。
我相信你的问题是,你传递了一个单一的处理程序,根据jQuery文档,当你传递一个单一的处理程序到hover,它是运行在悬停在和悬停在。
https://api.jquery.com/hover/#hover-handlerInOut
来自文档:
当传递给.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();
    }
);
ncgqoxb0

ncgqoxb02#

如果我正确理解了你的问题,这应该会有帮助。
小提琴: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');
});
ugmeyewa

ugmeyewa3#

如果你能在这两个元素周围包含一个 Package 器,这可以完全用CSS来完成。或者,如果必须是jQuery, Package 器无论如何都会有所帮助。
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 Alternative:

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

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

fiddle在这里:http://jsfiddle.net/v3txspx9/

相关问题