- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用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 文件似乎在 vendor 服务器上工作时不起作用:
<!-- 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>
这是完整的代码(请注意,您需要将http://cherne.net/brian/resources/jquery.hoverIntent.js保存在index.html旁边的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>
有人能解释一下吗?提供本地文件时文档准备“太快”还是什么?如何解决这个问题,至少是在本地? :>谢谢!
最佳答案
为了加载 jQuery,您通常使用 $(document).ready()
方法以确保它在加载网站内容后加载。因此,其中的任何内容都不会立即起作用,而是只有在加载其他所有内容之后才起作用(根据您的问题,这需要一些时间)。要解决此问题,您可以尝试放置
$("#link").on("mouseover", function() { ... }
- 这确实是 $("#link").hover()
的长形式- 直接在具有链接 id 的元素之后而不是在 $(document).ready()
内 block 。
对于移出移入部分:当鼠标指针从元素外部向内部移动时,会触发 mouseover。因此,即使指针已经在元素内部移动,也不会触发任何内容,即使在该元素中移动也是如此。
尝试使用 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?
关于javascript - jQuery - 悬停以触发刷新时悬停/鼠标悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26415232/
我们知道,当使用 hibernate 对数据库进行批量更新时(即使在 HQL 中),所做的更改不会复制到存储在当前 session 中的实体。 所以我可以调用 session.refresh 来加载对
我正在做一个项目,所有的东西都保存在事件中,所以服务器需要一些时间来响应新数据。我正在使用 Fluent 等待使用 ajax 的页面,但是这个不使用任何 ajax。所以我想刷新页面检查是否有新项目,如
我有一个从 Vector 创建的 JTable。 如何刷新 JTable 以显示添加到 Vector 的新数据? 最佳答案 当 TableModel 发生更改时,您的 JTable 应该会自动更新。我
有没有办法使用下面的代码来刷新已经存在的 div id,而不是刷新时间? window.onload = startInterval; function startInterval() {
我更新了在 Shiny Server 上运行的 Shiny 应用程序使用的 DataSet.RData。但是, Shiny 的应用程序仍在旧数据上运行。我已通过浏览器历史记录清除并重新启动浏览器几次,
我的应用程序中有一个无限滚动的网格面板(ExtJs 4.2.1),类似于 this example .用户可以单击刷新按钮,然后必须使用数据库中的数据更新网格的行。我在刷新按钮处理程序中调用 stor
我不知道这三种方法中哪一种最适合我。他们都为我工作。有谁知道刷新、更新和重画之间的区别吗? 最佳答案 根据在线文档: Refresh - 重新绘制屏幕上的控件。 Call Refresh method
有什么办法吗 ICollectionView.Refresh() 或者 CollectionViewSource.GetDefaultView(args.NewValue).Refresh(); 在
这个问题已经有答案了: Updating address bar with new URL without hash or reloading the page [duplicate] (4 个回答)
我有一个 javascript 设置超时以在 10 秒后关闭 div,并且我想在 div 关闭时添加页面刷新。我正在使用的代码如下。 var container_close_sec = "1
我有一组具有以下名称的页面.... update1.php update2.php update3.php update4.php update5.php update6.php update7.ph
如果是则触发js函数。我可以使一个复选框保持选中状态,并在页面刷新时检查值并选中“checked”,并提交以下内容... checked="checked" /> 你都不记得触发js函数。 这是我的
我正在尝试刷新 php 脚本以在数据库更新时显示更新的内容。我首先构建了我的 php,然后刷新代码,然后合并它们。但是,脚本不会更新。有谁知道为什么吗? $(document).ready
当我要删除的节点扩展集合类型时,Grails中有一个错误阻止我使用removeFrom *。直接从关联中删除节点不会更新二级缓存。 A hasMany B 有什么方法可以使关联缓存手动无效或强制重新加
我正在使用 hibernate 和 mysql 来抽象一个数据库,以便在 java 驱动的网站中使用。我使用 hibernate 很好地解决了所有查询,但似乎无法弄清楚如何使用它进行更新、插入和删除,
如何通过调用 oncreateview 方法重新创建 fragment ?我有一个 fragment ,用于通过表单插入新数据,单击按钮后,我想通过删除在 EditText 中输入的数据来重新创建 f
当我从一个到另一个时,我试图刷新我的观点。我知道我应该将刷新代码放在 viewWillAppear 中,但我不知道该放什么代码。 你们能帮帮我吗? 谢谢! 最佳答案 在您看来,请调用 setNeeds
我正在开发 iPhone 应用程序并希望使用: CFStreamCreatePairWithSocketToHost(NULL, url, port, &serverReadStream, &serv
看到我已经创建了一个用于登录用户的脚本。而且我还添加了设置选项卡,以便用户可以编辑他们的设置!但是当我尝试它时,mysql 表中的数据发生了变化,但配置文件中显示的用户名和用户电子邮件保持不变!当我注
好的。这就是它的样子。 当我启动应用程序时,我从服务器收到的第一件事是数据: {name: "test", type: "checkbox" checked: true, } 这使得其中一个复选框
我是一名优秀的程序员,十分优秀!