我在我的下拉菜单中使用HoverIndent jQuery插件，基本上我将鼠标悬停在#link上并显示#submenu。
不幸的是，它没有按预期工作。一开始看起来一切都很好但是有这种情况我将光标放在#link上，点击F5（页面刷新），刷新后没有触发HoverIndent，我必须将光标移出#link，然后将其移回让HoverIndent工作。更糟糕的是，它通常不会立即工作（我必须等待一段时间才能加载页面）。我一直在尝试一切，包括禁用所有其他JS，但没有运气。
我已经调查了一段时间，看起来像这个代码（这里基本的jQuery没有HoverIndent）：
$("#link").on("mouseover", function() {
console.log("hover");
})
或者这个：
$("#link").hover(function(){
console.log("hover");
})
工作方式相同，所以当我离开光标或#link并点击F5时，刷新后不会将“悬停”记录到控制台。
请注意它适用于jsfiddle等，因为在iframe中加载了页面，但它在本地不起作用。
它似乎也在HoverIdent的页面上工作，我完全不知道为什么。我是否正确悬停/鼠标悬停不应该在页面加载后立即启动？如果是，如何强制他们和我的HoverIndent有什么问题？
大更新
真的很奇怪。我已经下载了HTML5 Boilerplate并复制了整个HoverIndent演示页面。从供应商服务器开始工作时，本地提供的相同hoverIntent.js文件似乎不起作用：
<!-- uncomment this line and everything works? the hell? :D -->
<!-- <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script> -->
<!-- same code but from localhost and doesn't work -->
<script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
以下是整个代码（请注意，您需要在index.html旁边的js目录中保存http://cherne.net/brian/resources/jquery.hoverIntent.js：
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<!-- uncomment this line and everything works? the hell? :D -->
<!-- <script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script> -->
<!-- same code but from localhost and doesn't work -->
<script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
<style type="text/css" media="screen">
body{background-color:#fff;font-family:Verdana,Arial,sans-serif;font-size:1em;color:#000;margin:0;padding:0}a{outline:0}h1{margin:0;padding:.4em 0 .45em .6em;font-size:.9em;background-color:#996;color:#cc9;white-space:nowrap}h1 a{color:#cc9;text-decoration:none}h1 a:hover{color:#fff}h2{width:100%;border-bottom:#cc9 1px solid;margin:0 0 .5em;padding:1em 0 0;font-size:1.2em}h3{display:block;margin:0;padding:0 0 1px;font-size:1em;font-weight:700}h4{display:block;margin:0;padding:0 0 1px;text-transform:uppercase;font-size:.85em;font-weight:700;color:#996}img{border:none}p{margin:0;padding:0 0 1em;clear:both}ul{margin:0;padding:0 0 0 1em;clear:both;list-style-type:none}ul li{margin:0;padding:0 0 0 1em;background-image:url(images/bullet.gif);background-repeat:no-repeat;background-position:0 .15em}dl{margin:0;padding:0 0 2em;clear:both}dt{margin:0;padding:1em 0 0 1em;font-weight:700}dd{margin:0;padding:0 0 0 1em}#nav1{display:block;list-style-type:none;margin:0;padding:0 0 .25em;background-color:#cc9;white-space:nowrap}#nav1 li{display:inline;margin:0;padding:0 .75em 0 .25em;background-image:none}#nav1 li a{font-size:.9em;font-weight:700;padding:0 .3em;text-decoration:none;color:#787850}#nav1 li a:hover{background-color:#996;color:#000}#nav1 li a.current{color:#fff}#pageContent{font-size:.9em;line-height:1.3em;max-width:55em}#main{padding:1em 1em 3em;color:#000}#main a{color:#787850;text-decoration:underline}#main a:hover{text-decoration:none}#main h2.section{border-top:#cc9 1px solid;padding-top:.5em}#main p.section{border-top:#cc9 1px solid;margin-top:3em}#PICTURES #main a{float:left;display:block;width:33%;text-decoration:none;text-align:center;padding:.5em 0;margin:0 0 1em}#PICTURES #main a:hover{background:#e6e6cc}#PICTURES #main a img{display:block;width:93%;margin:0 auto;padding:0}#PICTURES #main span{display:block;width:92% margin:0 auto}div.job{clear:both;margin:1em 0 0;padding:0 0 1em}div.job h3{float:left;width:60%}div.job .what,div.job .when,div.job .where{float:left;display:block}div.job .what{padding:0 0 1px;width:40%;text-align:right;color:#996}div.job .when,div.job .where{position:relative;width:60%;text-transform:uppercase;font-size:.85em;line-height:1.5em;height:1.6em;background-color:#e6e6cc}div.job .when{width:40%;text-align:right}div.job p{padding:.5em 0}#RESUME h4{clear:both;padding:.5em 0 0 2.3em;font-weight:400;font-size:.85em}#RESUME #main ul{padding-bottom:.5em}#RESUME #main div.job ul{padding-bottom:.2em}#RESUME div.job ul li{background-image:none;padding-top:.3em;padding-bottom:.3em}#RESUME div.job p{clear:both;padding:.2em 0 .5em}#RESUME div.modified{clear:both;margin:0;padding:1em 0 0;color:#999;text-align:center}#PORTFOLIO h2{padding-top:.2em;font-size:1.2em;border-bottom:none}div.job p img{clear:left;float:left;width:100px;margin:0 .5em 0 0}#PORTFOLIO ul.screenshots{margin:0;padding:0;display:block;clear:both;list-style-type:none}#PORTFOLIO ul.screenshots li{display:block;margin:.5em 0;padding:1em 0;width:44em;float:left;background:#e6e6cc}#PORTFOLIO ul.screenshots li img{float:left;margin:0 1em}#PORTFOLIO ul.screenshots li span{display:block;padding-right:.5em}#PORTFOLIO dl{display:block;width:21em;float:left;clear:none}#PORTFOLIO dt a{font-weight:700}#RESOURCES #main li{padding-bottom:1em}#RESOURCES .download{text-align:center}#RESOURCES pre{background:#eee;color:#666;padding:1.5em;margin:0;font-size:1em;font-family:verdana;overflow:auto}#RESOURCES pre span{color:#699;font-family:arial}#RESOURCES #main .demo li{padding-bottom:0}ul.demo{display:block;width:100%;height:75px;padding:0;margin:0;background:#9cc;list-style-type:none}ul.demo li{background:#fcc;display:block;width:25%;height:50px;padding:0;margin:0;float:left;position:relative;overflow:hidden;cursor:default;font-size:.9em;line-height:1.1em}ul.demo li.p2{background:#ffc}ul.demo li.p3{background:#cfc}ul.demo li.p4{background:#ccf}ul.demo li span{display:block;margin:4px;background:#eef;cursor:default}
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#demo1 li").hover(makeTall,makeShort);
$("#demo2 li").hoverIntent(makeTall,makeShort);
$("#demo3 li").hoverIntent(toggleHeight);
$("#demo4").hoverIntent(makeTall,makeShort,'li');
$("#demo5").hoverIntent(toggleHeight,'li');
$("#demo6").hoverIntent({
over: makeTall,
out: makeShort,
selector: 'li'
});
});
function makeTall(){$(this).animate({"height":75},200);}
function makeShort(){$(this).animate({"height":50},200);}
function toggleHeight(){var h=(parseInt($(this).css('height'),10) > 50) ? 50 : 75; $(this).animate({"height":h},200);}
</script>
</head>
<body>
<div id="pageContent">
<div id="main">
<h2>What is hoverIntent?</h2>
<p>hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to <a href="http://api.jquery.com/hover/">jQuery's hover method</a>. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.</p>
<p>Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent. That's where hoverIntent comes in...</p>
<p class="download"><a href="jquery.hoverIntent.js">Download hoverIntent v1.8.0 (fully-commented, uncompressed)</a></p>
<p class="download"><a href="jquery.hoverIntent.minified.js">Download hoverIntent v.1.8.0 (minified)</a></p>
<p class="download"><a href="https://github.com/briancherne/jquery-hoverIntent">briancherne/jquery-hoverIntent (GitHub)</a></p>
<h2>Examples</h2>
<noscript><p><em>If you can see this message <strong>JavaScript is disabled</strong>. This plug-in requires JavaScript to be enabled in order for the examples to work. (This is really a note to myself so the next time I look at my web site with JavaScript accidentally turned off I don't freak out and wonder why it's not working)</em></p></noscript>
<h3>jQuery's hover (for reference)</h3>
<pre>$("#demo1 li").hover( makeTall, makeShort );</pre>
<ul class="demo" id="demo1">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"><span>hover ignores over/out events from children</span></li>
</ul>
<p>jQuery's built-in hover calls handlerIn and handlerOut functions immediately. If you move your cursor back and forth quickly across the tiles you'll see how the immediate execution can lead to problems.</p>
<h3>.hoverIntent( handlerIn, handlerOut )</h3>
<pre>$("#demo2 li").hoverIntent( makeTall, makeShort );</pre>
<ul class="demo" id="demo2">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"><span>hoverIntent also ignores over/out events from children</span></li>
</ul>
<p>hoverIntent is interchangeable with jQuery's hover. It can use the same exact handlerIn and handlerOut functions. It passes the same <strong>this</strong> and <strong>event</strong> objects to those functions.</p>
<h3>.hoverIntent( handlerInOut )</h3>
<pre>$("#demo3 li").hoverIntent( toggleHeight );</pre>
<ul class="demo" id="demo3">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"> </li>
</ul>
<p>hoverIntent can also take a single handlerInOut, just like jQuery's hover.</p>
<h3>.hoverIntent( handlerIn, handlerOut, selector )</h3>
<pre>$("#demo4").hoverIntent( makeTall, makeShort, 'li' );</pre>
<ul class="demo" id="demo4">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"> </li>
</ul>
<p>Unlike jQuery's hover, hoverIntent supports event delegation! Just pass in a selector of a descendant element.</p>
<h3>.hoverIntent( handlerInOut, selector )</h3>
<pre>$("#demo5").hoverIntent( toggleHeight, 'li' );</pre>
<ul class="demo" id="demo5">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"> </li>
</ul>
<p>Unlike jQuery's hover, hoverIntent supports event delegation with handlerInOut.</p>
<h3>.hoverIntent( object )</h3>
<pre>
$("#demo6").hoverIntent({
over: makeTall,
out: makeShort,
selector: 'li'
});
</pre>
<ul class="demo" id="demo6">
<li class="p1"> </li>
<li class="p2"> </li>
<li class="p3"> </li>
<li class="p4"> </li>
</ul>
<p>To control hoverIntent more precisely and override the default configuration options, pass it an object as the first parameter. The object must at least contain an "over" function. If the "over" function is sent alone, it will act just like handlerInOut.</p>
<h2>Common Configuration Options</h2>
<p>These are the common options you'll want to use. Note, nothing prevents you from sending <a href="http://api.jquery.com/jQuery.noop/">an empty function</a> as the handlerIn or handlerOut functions.</p>
<h3>over:</h3>
<p>Required. The handlerIn function you'd like to call on "mouseenter with intent". Your function receives the same "this" and "event" objects as it would from jQuery's hover method. If the "over" function is sent alone (without "out") then it will be used in both cases like the handlerInOut param.</p>
<h3>out:</h3>
<p>The handlerOut function you'd like to call on "mouseleave after timeout". Your function receives the same "this" and "event" objects as it would from jQuery's hover method. Note, hoverIntent will only call the "out" function if the "over" function has been called.</p>
<h3>timeout:</h3>
<p>A simple delay, in milliseconds, before the "out" function is called. If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. <em>Default timeout: 0</em></p>
<h3>selector:</h3>
<p>A selector string for event delegation. Used to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element. Read <a href="http://api.jquery.com/on/#direct-and-delegated-events">jQuery's API Documentation for the .on() method</a> for more information.</p>
<h2>Advanced Configuration Options</h2>
<p>Modify these if you are brave, test tirelessly, and completely understand what you are doing. When choosing the default settings for hoverIntent I tried to find the best possible balance between responsiveness and frequency of false positives.</p>
<h3>sensitivity:</h3>
<p>If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. Note that hoverIntent r7 and earlier perform this comparison using rectilinear distance, whereas more recent versions compare against euclidean (straight-line) distance for better accuracy and intuition. If you are upgrading from an older version, you may want to verify that the desired behavior is preserved. <em>Default sensitivity: 6</em></p>
<h3>interval:</h3>
<p>The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the "over" function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. <em>Default interval: 100</em></p>
<h2 id="defects">Known Defects</h2>
<p>hoverIntent r5 suffers from <a href="http://code.google.com/p/chromium/issues/detail?id=68629">a defect in Google Chrome that improperly triggers mouseout when entering a child input[type="text"] element</a>. hoverIntent r6 uses the same mouseenter/mouseleave special events as jQuery's built-in hover, and jQuery 1.5.1 patched this issue. Thanks to Colin Stuart for tipping me off about this and for providing isolated code to demonstrate/test.</p>
<p id="chrome9defect" style="background:#eee;margin-bottom:1em;">This page uses jQuery 1.9.1 and hoverIntent r7, so when your cursor goes over the text input nothing should change (it should continue to read "enter parent" because you are still over this paragraph). <br/><input type="text" value=""/><br/> However, if you were using Google Chrome and if this page were using an older version of jQuery or hoverIntent, moving the cursor over the text input would improperly trigger the mouseout event, and the value would change to "leave parent".</p>
<script type="text/javascript">
function enter(e){$("input", e.target).val("enter parent");}
function leave(e){$("input", e.target).val("leave parent");}
$("#chrome9defect").hoverIntent(enter,leave);
</script>
<p>If you place an element flush against the edge of the browser chrome, sometimes Internet Explorer does not trigger a "mouseleave" event if your cursor leaves the element/browser in that direction. hoverIntent cannot correct for this.</p>
<p>Please email me <strong>brian(at)cherne(dot)net</strong> if you have questions or would like to notify me of any defects.</p>
<h2>Release History</h2>
<ul>
<li><a href="jquery.hoverIntent-1.8.0.js" title="jQuery hoverIntent r8 (v1.8.0)">v1.8.0</a> = (2014) Changed to <a href="http://semver.org">Semantic Versioning</a> (from r8 to v1.8.0). Removed <a href="https://en.wikipedia.org/wiki/Zero-width_no-break_space">U+FEFF character</a> from beginning of JS file. Removed stray "jQuery" in favor of "$" for noConflict situations. Changed measurements to use euclidean (instead of rectilinear) distance. Thanks to github community for patches, suggestions, and fixes!</li>
<li><a href="jquery.hoverIntent-1.7.0.js" title="jQuery hoverIntent r7 (v1.7.0)">r7</a> = (2013) Added event delegation via "selector" param/property. Added namespaced events for better isolation. Added handlerInOut support.</li>
<li><a href="jquery.hoverIntent-1.6.0.js" title="jQuery hoverIntent r6 (v1.6.0)">r6</a> = (2011) Identical to r5 except that the Google Chrome defect is fixed once you upgrade to jQuery 1.5.1 (or later).</li>
<li><a href="jquery.hoverIntent-1.5.0.js" title="jQuery hoverIntent r5 (v1.5.0)">r5</a> = (2007) Added state to prevent unmatched function calls. This and previous releases suffer from <a href="http://code.google.com/p/chromium/issues/detail?id=68861">a defect in Google Chrome that improperly triggers mouseout when entering a child input[type=text] element</a>.</li>
<li>r4 = Fixed polling interval timing issue (now uses a self-calling timeout to avoid interval irregularities).</li>
<li>r3 = Developer-only release for debugging.</li>
<li>r2 = Added timeout and interval references to DOM object -- keeps timers separate from each other. Added configurable options. Added timeout option to delay onMouseLeave function call. Fixed two-interval mouseOver bug (now setting pX and pY onMouseEnter instead of hardcoded value).</li>
<li>r1 = Initial release to jQuery discussion forum for feedback.</li>
</ul>
</div><!-- close #main -->
</div><!-- close #pageContent -->
</body>
有人可以解释一下吗？在提供本地文件或什么时，文档就绪“太快”了？如何解决这个问题，至少在本地解决？产品：＆gt;谢谢！
答案 0 :(得分：4)
要加载jQuery，通常使用$(document).ready()方法确保在加载网站内容后加载它。因此，那里的任何东西都不会马上工作，但只有在其他所有东西都被加载之后（根据你的问题需要一些时间）。要解决此问题，您可以尝试放置
$("#link").on("mouseover", function() { ... }
- 确实是$("#link").hover()的长格式 - 直接在具有链接ID的元素之后而不是在$(document).ready()块内。
对于移出 - 移入部分：当您将指针从元素外部移动到内部时，会触发鼠标悬停。因此，将指针放在元素内部将不会触发任何内容，即使在该元素中移动也是如此。
尝试使用mousemove代替：
$("#link").on("mousemove", function() {
console.log("hover");
})
此外，您可能希望深入了解jQuery API文档，因为详细解释了函数和鼠标事件（及其工作方式）：http://api.jquery.com/
编辑：如果按照建议使用mouseenter，它基本上会出现同样的问题：您必须移出元素并重新启动才能触发事件。 mouseover和mouseenter之间的差异在此解释：What is the difference between the mouseover and mouseenter events?
答案 1 :(得分：2)
尝试“mouseenter”而不是“mouseover”，它可以正常工作。
$(document).ready(function() {
$("#link").on("mouseenter", function() {
console.log("hover");
});
});#link {
padding: 20px;
background: #FFF000;
font-size: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link">link here</a>