使用 jQuery 检测 IF 悬停在元素上方

小开

悬停时设置一个标志:

var over = false;
$('#elem').hover(function() {
over = true;
},
function () {
over = false;
});

那就看看你的旗子。

小开

最佳答案

原始(正确)答案:

您可以使用 is()并检查选择器 :hover。

var isHovered = $('#elem').is(":hover"); // returns true or false

例子: http://jsfiddle.net/Meligy/2kyaJ/3/

(这只在选择器匹配一个最大元素时有效。请参阅编辑3以获得更多信息)

.

Edit 1(June 29,2013) : (仅适用于 jQuery 1.9.x，因为它可以与1.10 + 一起工作，请参阅下一个 Edit 2)

这个答案在问题被回答的时候是最好的解决方案。在 jQuery 1.9.x 中，通过删除 .hover()方法，删除了这个“ : hover”选择器。

有趣的是，“ allicarn”最近的一个答案显示，当你用一个选择器 $($(this).selector + ":hover").length > 0作为前缀时，可以使用 :hover作为 CSS 选择器(相对于 Sizzle) ，而且它似乎可以工作！

另外，在另一个答案中提到的盘旋意图插件看起来也很不错。

编辑2(2013年9月21日) : .is(":hover") < strong > 作品

基于另一条评论，我注意到我最初发布的方式 .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 中的失败是一个 bug，或者说不是我们在前一点中认为的故意行为。

如果您想在某个特定的 jQuery 版本中测试它，只需在这个答案的开头打开 JSFidlle 示例，切换到所需的 jQuery 版本，然后单击“ Run”。如果悬停时颜色发生变化，它就起作用了。

.

编辑3(2014年3月9日) : 只有当 jQuery 序列包含单个元素时，它才能工作

正如@Wilmer 在评论中所展示的，他的小提琴甚至不能与我和其他人测试过的 jQuery 版本相匹配。当我试图找出他的案子有什么特别之处时，我注意到他试图一次检查多个要素。这是抛出 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 序列，比如原始选择器只匹配一个元素，或者对结果调用 .first()，等等。

我的 JavaScript + Web 开发技巧和资源通讯也提到了这一点。

小开

扩展@Mohamed 的回答，你可以使用一点封装

像这样:

jQuery.fn.mouseIsOver = function () {
if($(this[0]).is(":hover"))
{
return true;
}
return false;
};

像这样使用:

$("#elem").mouseIsOver();//returns true or false

叉开小提琴: Http://jsfiddle.net/cgwdf/1/

小开

为每个 Kinakuta 的回答设置一个标志似乎是合理的，你可以在身体上放一个监听器，这样你就可以检查是否有任何元素在某个特定的时刻悬停。

但是，您希望如何处理子节点？您也许应该检查该元素是否是当前悬浮元素的祖先。

<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 a p in the div<span> here is a span in the p</span> foo bar </p>
</div>
<div id="msg"></div>
</body>

小开

在研究这个主题一段时间后，还有几个更新要添加:

在 jQuery 1.9.1上，使用. is (“ : hover”)中断的所有解决方案
检查鼠标是否仍在某个元素上方的最可能的原因是试图防止事件相互触发。例如，在我们的 mouseenter 事件完成之前，我们的 mouseleave 就被触发并完成了。当然，这是因为鼠标的快速移动。

我们使用 hoverInenthttps://github.com/briancherne/jquery-hoverIntent为我们解决了这个问题。本质上，如果鼠标的移动更加谨慎，它就会触发。(需要注意的一点是，它会在鼠标进入一个元素和离开时触发——如果你只想使用一个函数来传递给构造函数一个空函数)

小开

用途:

var hovered = $("#parent").find("#element:hover").length;

JQuery 1.9 +

小开

这个插件是基于 user2444818的回答设计的。

jQuery.fn.mouseIsOver = function () {
return $(this).parent().find($(this).selector + ":hover").length > 0;
};

Http://jsfiddle.net/wp2v4/1/

小开

我喜欢第一反应，但对我来说很奇怪。当试图在页面加载之后检查鼠标时，我必须至少延迟500毫秒才能让它工作:

$(window).on('load', function() {
setTimeout(function() {
$('img:hover').fadeOut().fadeIn();
}, 500);
});

Http://codepen.io/molokoloco/pen/grvkx/

小开

您可以从所有悬浮的元素中筛选元素。问题代码:

element.filter(':hover')

保存代码:

jQuery(':hover').filter(element)

返回布尔值:

jQuery(':hover').filter(element).length===0

小开

接受的答案在 JQuery2.x 上对我不起作用 .is(":hover")在每次调用时返回 false。

我最终得到了一个非常简单的解决方案，它很有效:

function isHovered(selector) {


return $(selector+":hover").length > 0


}

小开

Https://api.jquery.com/hover/

第38行中的异步函数:

$( ".class#id" ).hover(function() {
Your javascript
});