使用 jQuery 检测将鼠标悬停在元素上的 IF

Detect IF hovering over element with jQuery

本文关键字：元素 IF 悬停 jQuery 检测 鼠标 使用      更新时间：2023-09-26

我不是在寻找悬停时要调用的操作，而是在寻找一种判断元素当前是否悬停的方法。例如：

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

有没有一个jQuery方法可以实现这一点？

原始(和正确(答案：

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

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

示例：http://jsfiddle.net/Meligy/2kyaJ/3/

(这仅在选择器与最大一个元素匹配时才有效。请参阅编辑 3 了解更多信息(

.

编辑 1(2013 年 6 月 29 日(：(仅适用于 jQuery 1.9.x，因为它适用于 1.10+，请参阅下一个编辑 2(

这个答案是回答问题时最好的解决方案。这个"：hover"选择器在jQuery 1.9.x中与.hover()方法一起删除。

有趣的是，"allicarn"最近的回答表明，当您在选择器$($(this).selector + ":hover").length > 0前缀时，可以使用:hover作为CSS选择器(与Sizzle相比(，而且它似乎有效！

此外，另一个答案中提到的悬停意图插件看起来也非常好。

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

根据另一条评论，我注意到我发布的原始方式.is(":hover")实际上仍然适用于jQuery，所以。

  1. 它在jQuery 1.7.x中工作。

  2. 当有人向我报告它时，它在 1.9.1 中停止工作，我们都认为它与 jQuery 删除该版本中事件处理的hover别名有关。

  3. 它在 jQuery 1.10.1 和 2.0.2(可能是 2.0.x(中再次工作，这表明 1.9.x 中的失败是一个错误，而不是我们在上一点中认为的故意行为。

如果你想在一个特定的jQuery版本中测试这一点，只需打开这个答案开头的JSFidlle示例，切换到所需的jQuery版本，然后单击"运行"。如果悬停时颜色发生变化，则表示有效。

.

编辑 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 Dev Tips & Resources Newsletter中也提到了这一点。

使用：

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

j查询 1.9+

它在 jQuery 1.9 中不起作用。 根据user2444818的答案制作了这个插件。

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

http://jsfiddle.net/Wp2v4/1/

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

我最终得到了一个非常简单的解决方案：

function isHovered(selector) {
    return $(selector+":hover").length > 0
}

在悬停时设置标志：

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

然后只需检查您的旗帜。

在

处理此主题一段时间后要添加的几个更新：

  1. 所有带有 .is("：hover"( 的解决方案在 jQuery 1.9.1 上中断
  2. 检查鼠标是否仍在元素上的最可能原因是尝试防止事件相互触发。 例如，我们在 mouseenter 事件完成之前触发并完成 mouseleave 时遇到了问题。当然，这是因为鼠标移动速度很快。

我们使用悬停意图 https://github.com/briancherne/jquery-hoverIntent 为我们解决了这个问题。从本质上讲，如果鼠标移动更刻意，它会触发。(需要注意的一件事是，它将在鼠标进入元素和离开时触发 - 如果您只想使用一次传递构造函数一个空函数(

您可以从所有悬停的元素中过滤您的 elment。有问题的代码：

element.filter(':hover')

保存代码：

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

返回布尔值：

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

扩展@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/

我喜欢

第一个反应，但对我来说这很奇怪。当尝试在页面加载后检查鼠标时，我必须至少输入 500 毫秒的延迟才能使其工作：

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

http://codepen.io/molokoloco/pen/Grvkx/

https://api.jquery.com/hover/

第 38 行中的异步函数：

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

为每个 kinakukuta 的答案设置一个标志似乎是合理的，您可以在正文上放置一个侦听器，以便您可以检查在特定时刻是否有任何元素悬停。

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

<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>

There're so many ways this can be achieved. I personally don't like styling elements directly, I'd rather add the style from css, makes things easier when trying to override or change them.
<style type="text/css">.red-bg { background: red; }</style>
$('#my_element').hover(function() {
    $(this).parent().toggleClass('red-bg');
});

或

$('#my_element').hover(function() {
    $(this).parent().addClass('red-bg');
}, function() {
    $(this).parent().removeClass('red-bg');
});

或使用鼠标输入和鼠标离开

$(document).on('mouseenter', '#my_element', function() {
    $(this).parent().addClass('red-bg');
});
$(document).on('mouseenter', '#my_element', function() {
    $(this).parent().removeClass('red-bg');
});
相关文章：