blocks|key|3134643|text|使用jquery的hoverIntent插件：http://cherne.net/brian/resources/jquery.hoverIntent.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3134644|它完全符合你的描述，我几乎在每个需要鼠标悬停激活菜单的项目中都使用过它。|3134645|这种方法有一个问题，一些接口没有“悬停”状态，例如。像iphone上的safari一样的移动浏览器。您可能隐藏了界面或导航的重要部分，但无法在这样的设备上打开它。你可以用特定于设备的CSS来解决这个问题。|3134646|entityMap|0|LINK|mutability|MUTABLE|url|http://cherne.net/brian/resources/jquery.hoverIntent.html^0|N|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

Use the hoverIntent plugin for jquery: <a href="http://cherne.net/brian/resources/jquery.hoverIntent.html" rel="noreferrer">http://cherne.net/brian/resources/jquery.hoverIntent.html</a>

It's absolutely perfect for what you describe and I've used it on nearly every project that required mouseover activation of menus etc...

There is one gotcha to this approach, some interfaces are devoid of a 'hover' state eg. mobile browsers like safari on the iphone. You may be hiding an important part of the interface or navigation with no way to open it on such a device. You could get round this with device specific CSS.

blocks|key|3134657|text|您可以在mouseout事件上使用带有clearTimeout()的setTimeout()调用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3134658|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You could use a setTimeout() call with a clearTimeout() on the mouseout event.

blocks|key|353593|text|你需要在悬停时检查计时器。如果它不存在(即这是第一次悬停)，则创建它。如果它存在(即这不是第一次悬停)，杀死它并重新启动它。将计时器有效负载设置为您的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|353594|$(function()+{
++++var+timer;

++++$('#container+a').hover(function()+{
++++++++if(timer)+{
++++++++++++clearTimeout(timer);
++++++++++++timer+=+null
++++++++}
++++++++timer+=+setTimeout(function()+{
++++++++++++$('<div+id="fileinfo"+/>').load('ReadTextFileX.aspx',
++++++++++++++++{filename:'file.txt'},
++++++++++++++++function()+{
++++++++++++++++++++$(this).appendTo('#info');
++++++++++++++++}
++++++++++++);
++++++++},+500)
++++},
++++//+mouse+out
++++});
});|code-block|syntax|javascript|353595|我敢打赌，jQuery有一个函数可以帮你完成这一切。|353596|编辑:啊是的，jQuery+plugin+to+the+rescue|offset|length|353597|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/435732/delay-jquery-hover-event#435760^0|0|0|0|7|R|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You need to check a timer on hover. If it does not exist (ie this is the first hover), create it. If it exists (ie this is not the first hover), kill it and restart it. Set the timer payload to your code.

<pre><code>$(function() {
 var timer;

 $('#container a').hover(function() {
 if(timer) {
 clearTimeout(timer);
 timer = null
 }
 timer = setTimeout(function() {
 $('&lt;div id="fileinfo" /&gt;').load('ReadTextFileX.aspx',
 {filename:'file.txt'},
 function() {
 $(this).appendTo('#info');
 }
 );
 }, 500)
 },
 // mouse out
 });
});
</code></pre>

I bet jQuery has a function that wraps this all up for you.

Edit: Ah yes, <a href="https://stackoverflow.com/questions/435732/delay-jquery-hover-event#435760">jQuery plugin to the rescue</a>

blocks|key|3347685|text|我的解决方案很简单。如果用户将鼠标输入停留在obj上超过300ms，则延迟打开菜单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3347686|var+sleep+=+0;
$('#category+li').mouseenter(function()+{
++++sleep+=+1;
++++$('#category+li').mouseleave(function()+{
++++++++sleep+=+0;
++++});
++++var+ob+=+$(this);
++++setTimeout(function()+{+++++++++++++++++++++++++
++++++++if(sleep)+{
++++++++++++//+[...]+Example:
++++++++++++$('#'%2Bob.attr('rel')).show();
++++++++}
++++},+300);
});|code-block|syntax|javascript|3347687|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My solution is easy. Delay open menu if user keeping mouseenter on obj over 300ms:

<pre><code>var sleep = 0;
$('#category li').mouseenter(function() {
 sleep = 1;
 $('#category li').mouseleave(function() {
 sleep = 0;
 });
 var ob = $(this);
 setTimeout(function() { 
 if(sleep) {
 // [...] Example:
 $('#'+ob.attr('rel')).show();
 }
 }, 300);
});
</code></pre>

blocks|key|3134859|text|完全同意hoverIntent是最好的解决方案，但是如果你碰巧是一个不幸的草帽，在一个网站上工作，有一个漫长而漫长的jQuery插件审批过程，这里有一个快速而肮脏的解决方案，对我来说效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3134860|$('li.contracted').hover(function+()+{
++++var+expanding+=+$(this);
++++var+timer+=+window.setTimeout(function+()+{
++++++++expanding.data('timerid',+null);

++++++++++++...+do+stuff

++++},+300);
++++//store+ID+of+newly+created+timer+in+DOM+object
++++expanding.data('timerid',+timer);
},+function+()+{
++++var+timerid+=+$(this).data('timerid');
++++if+(timerid+!=+null)+{
++++++++//mouse+out,+didn't+timeout.+Kill+previously+started+timer
++++++++window.clearTimeout(timerid);
++++}
});|code-block|syntax|javascript|3134861|如果鼠标停留的时间超过300ms，则此命令仅用于扩展。|3134862|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Totally agree that hoverIntent is the best solution, but if you happen to be an unfortunate sod who works on a website with a long and protracted process for approval of jQuery plugins, here's a quick and dirty solution which worked well for me:

<pre><code>$('li.contracted').hover(function () {
 var expanding = $(this);
 var timer = window.setTimeout(function () {
 expanding.data('timerid', null);

 ... do stuff

 }, 300);
 //store ID of newly created timer in DOM object
 expanding.data('timerid', timer);
}, function () {
 var timerid = $(this).data('timerid');
 if (timerid != null) {
 //mouse out, didn't timeout. Kill previously started timer
 window.clearTimeout(timerid);
 }
});
</code></pre>

This one's just for expanding an &lt;li&gt; if the mouse has been on it for longer than 300ms.

blocks|key|356135|text|在2016年，新月会的解决方案并没有像我预期的那样工作，所以我想出了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356136|$(selector).hover(function()+{
++++hovered+=+true;
++++setTimeout(function()+{
++++++++if(hovered)+{
++++++++++++//do+stuff
++++++++}
++++},+300);+//you+can+pass+references+as+3rd,+4th+etc.+arguments+after+the+delay

},+function()+{
++++hovered+=+false;
});|code-block|syntax|javascript|356137|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In 2016 Crescent Fresh's solution didn't work as expected for me, so I came up with this:

<pre><code>$(selector).hover(function() {
 hovered = true;
 setTimeout(function() {
 if(hovered) {
 //do stuff
 }
 }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
 hovered = false;
});
</code></pre>

I would like to delay a hover event in jquery. I am reading from a file when user hovers over a link or label. I don't want this event to occur immediately in case the user is just moving the mouse across the screen. Is there a way to delay the event from firing?

Thank you.

Example code:

<pre><code>$(function() {
 $('#container a').hover(function() {
 $('&lt;div id="fileinfo" /&gt;').load('ReadTextFileX.aspx',
 {filename:'file.txt'},
 function() {
 $(this).appendTo('#info');
 }
 );
 },
 function() { $('#info').remove(); }
 });
});
</code></pre>

UPDATE: (1/14/09)
After adding the HoverIntent plugin the above code was changed to the following to implement it. Very simple to implement.

<pre><code>$(function() {
 hiConfig = {
 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
 interval: 200, // number = milliseconds for onMouseOver polling interval
 timeout: 200, // number = milliseconds delay before onMouseOut
 over: function() {
 $('&lt;div id="fileinfo" /&gt;').load('ReadTextFileX.aspx', {filename:'file.txt'},
 function() {
 $(this).appendTo('#info');
 }
 );
 }, // function = onMouseOver callback (REQUIRED)
 out: function() { $('#info').remove(); } // function = onMouseOut callback (REQUIRED)
 }
 $('#container a').hoverIntent(hiConfig)
}
</code></pre>

Delay jquery hover event?

我想在jquery中延迟一个悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。我不希望这个事件立即发生，以防用户只是在屏幕上移动鼠标。有没有办法延迟事件的触发？谢谢。示例代码：$(function() { $('#container a').hover(function() { $('<d...

问延迟jquery悬停事件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问延迟jquery悬停事件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问延迟jquery悬停事件？
EN