使用jQuery检测IFhover在元素上
我不是在寻找hover时要调用的动作,而是通过一种方法来判断一个元素是否被当前hover。 例如:
$('#elem').mouseIsOver(); // returns true or false
有没有一个jQuery的方法来完成这个?
原(而且正确)答案:
您可以使用is()
并检查select器:hover
。
var isHovered = $('#elem').is(":hover"); // returns true or false
例如: http : //jsfiddle.net/Meligy/2kyaJ/3/
(只有select器最多匹配一个元素时才有效,更多请参阅编辑3)
。
编辑1(2013年6月29日):(仅适用于jQuery 1.9.x,因为它与1.10+一起工作,请参阅下一个编辑2)
在回答问题的时候,这个答案是最好的解决scheme。 这个':hover'select器被删除,jQuery 1.9.x中的.hover()
方法被删除。
有趣的是,“allicarn”最近的答案显示,当你用select器$($(this).selector + ":hover").length > 0
作为前缀时,可以使用:hover
作为CSSselect器(vs. Sizzle)它似乎工作!
另外,在另一个答案中提到的hoverIntent插件看起来也很好。
编辑2(2013年9月21日) .is(":hover")
起作用
基于另一个评论,我注意到我张贴的原始方式.is(":hover")
实际上仍然在jQuery中工作,所以。
-
它在jQuery 1.7.x中工作。
-
它在1.9.1停止工作,当有人向我汇报时,我们都认为这与jQuery删除该版本中的事件处理的
hover
别名有关。 -
它在jQuery 1.10.1和2.0.2(也许2.0.x)中再次运行,这表明1.9.x中的失败是一个错误,或者不像我们在前面所说的那样是故意的行为。
如果你想在q特定的jQuery版本中testing这个,只需在这个答案的开始处打开JSFidlle示例,更改为所需的jQuery版本,然后单击“运行”。 如果hover时颜色发生变化,则会起作用。
。
编辑3(2014年3月9日):仅当jQuery序列包含单个元素时才起作用
如@Wilmer在评论中所示,他有一个小提琴甚至没有针对jQuery版本,我和其他人在这里testing它。 当我试图找出他的案件有什么特别之处时,我注意到他一次试图检查多个元素。 这是Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover
。
所以,用他的小提琴工作,这是行不通的:
var isHovered = !!$('#up, #down').filter(":hover").length;
虽然这样做工作:
var isHovered = !!$('#up,#down'). filter(function() { return $(this).is(":hover"); }).length;
它也适用于包含单个元素的jQuery序列,就像原始select器只匹配一个元素,或者如果你在结果中调用.first()
等等。
这也在我的JavaScript + Web Dev提示和资源通讯中引用。
使用:
var hovered = $("#parent").find("#element:hover").length;
jQuery 1.9+
它在jQuery 1.9中不起作用。 根据user2444818的回答制作了这个插件。
jQuery.fn.mouseIsOver = function () { return $(this).parent().find($(this).selector + ":hover").length > 0; };
扩展@穆罕默德的答案。 你可以使用一个小封装
喜欢这个:
jQuery.fn.mouseIsOver = function () { if($(this[0]).is(":hover")) { return true; } return false; };
像这样使用它:
$("#elem").mouseIsOver();//returns true or false
叉着小提琴: http : //jsfiddle.net/cgWdF/1/
在处理这个主题一段时间之后添加几个更新:
- .is(“:hover”)的所有解决scheme都在jQuery 1.9.1上打破
- 检查鼠标是否仍在某个元素上的最可能的原因是试图防止事件相互发生。 例如,我们在我们的mouseenter事件完成之前触发并完成了mouseleave的问题。 当然这是因为快速的鼠标移动。
我们使用hoverIntent https://github.com/briancherne/jquery-hoverIntent来为我们解决问题。; 从本质上讲,如果鼠标移动更有意思,就会触发它。 (有一点要注意的是,它会触发鼠标进入一个元素,并离开 – 如果你只想使用一个传递构造函数一个空函数)
在hover上设置一个标志:
var over = false; $('#elem').hover(function() { over = true; }, function () { over = false; });
然后只是检查你的国旗。
你可以从你所有的元素中过滤掉你的元素。 有问题的代码:
element.filter(':hover')
保存代码:
jQuery(':hover').filter(element)
返回布尔值:
jQuery(':hover').filter(element).length===0
我喜欢第一个反应,但对我来说这很奇怪。 当试图检查鼠标的页面加载后,我必须至less放置一个500毫秒的延迟才能工作:
$(window).on('load', function() { setTimeout(function() { $('img:hover').fadeOut().fadeIn(); }, 500); });
为每个kinakuta的答案设置一个标志似乎是合理的,你可以把一个听众的身体,所以你可以检查是否有任何元素在特定的时刻被盘旋。
但是,你想如何处理子节点呢? 您应该检查元素是否是当前hover的元素的祖先。
<script> var isOver = (function() { var overElement; return { // Set the "over" element set: function(e) { overElement = e.target || e.srcElement; }, // Return the current "over" element get: function() { return overElement; }, // Check if element is the current "over" element check: function(element) { return element == overElement; }, // Check if element is, or an ancestor of, the // current "over" element checkAll: function(element) { while (overElement.parentNode) { if (element == overElement) return true; overElement = overElement.parentNode; } return false; } }; }()); // Check every second if p0 is being hovered over window.setInterval( function() { var el = document.getElementById('p0'); document.getElementById('msg').innerHTML = isOver.checkAll(el); }, 1000); </script> <body onmouseover="isOver.set(event);"> <div>Here is a div <p id="p0">Here is ap in the div<span> here is a span in the p</span> foo bar </p> </div> <div id="msg"></div> </body>
接受的答案对我来说并不适用于JQuery 2.x .is(":hover")
在每次调用时都返回false。
我结束了一个非常简单的解决scheme:
function isHovered(selector) { return $(selector+":hover").length > 0 }