我有一个链接,当悬停它显示另一个div外的链接,当我移动鼠标到新显示的div我需要它留下来。目前,只要焦点通过移动到显示的div而离开链接,它当然会消失。这真的很简单,这是我在MO上的东西:
$('a.tel').hover(function() { $('.phonePanel').fadeToggle().addClass('show'); });
lztngnrs1#
不完全确定你在找什么,但这里有一些快速代码,显示一个div,并保持可见,直到你悬停在该div上,然后退出。我不知道你用show类做了什么,所以我在示例中添加了它,但它在我的示例中实际上没有做任何事情。我相信你的问题是,你传递了一个单一的处理程序,根据jQuery文档,当你传递一个单一的处理程序到hover,它是运行在悬停在和悬停在。https://api.jquery.com/hover/#hover-handlerInOut来自文档:当传递给.hover()方法一个函数时,它将为mouseenter和mouseleave事件执行该处理程序。这允许用户在处理程序中使用jQuery的各种切换方法,或者根据event.type在处理程序中做出不同的响应。在我下面的例子中,你可以看到一个给出一个或两个处理程序的例子。小提琴:http://jsfiddle.net/x4fo4zkk/HTML:
hover
<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(); } );
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'); });
ugmeyewa3#
如果你能在这两个元素周围包含一个 Package 器,这可以完全用CSS来完成。或者,如果必须是jQuery, Package 器无论如何都会有所帮助。HTML
<div class="phoneWrapper"> <a class="tel">show more</a> <div class="phonePanel">here is more</div> </div>
.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/
3条答案
按热度按时间lztngnrs1#
不完全确定你在找什么,但这里有一些快速代码,显示一个div,并保持可见,直到你悬停在该div上,然后退出。我不知道你用show类做了什么,所以我在示例中添加了它,但它在我的示例中实际上没有做任何事情。
我相信你的问题是,你传递了一个单一的处理程序,根据jQuery文档,当你传递一个单一的处理程序到
hover
,它是运行在悬停在和悬停在。https://api.jquery.com/hover/#hover-handlerInOut
来自文档:
当传递给.hover()方法一个函数时,它将为mouseenter和mouseleave事件执行该处理程序。这允许用户在处理程序中使用jQuery的各种切换方法,或者根据event.type在处理程序中做出不同的响应。
在我下面的例子中,你可以看到一个给出一个或两个处理程序的例子。
小提琴:http://jsfiddle.net/x4fo4zkk/
HTML:
CSS:
JS:
ncgqoxb02#
如果我正确理解了你的问题,这应该会有帮助。
小提琴:http://jsfiddle.net/3y6yjk3y/
ugmeyewa3#
如果你能在这两个元素周围包含一个 Package 器,这可以完全用CSS来完成。或者,如果必须是jQuery, Package 器无论如何都会有所帮助。
HTML
CSS:
jQuery Alternative:
fiddle在这里:http://jsfiddle.net/v3txspx9/