如何判断鼠标是否悬停在一个元素上

Question

有没有一种函数可以调用，以便知道某个元素当前是否正在被悬停，就像这样?

/* Returns true or false */
hoveringOver("a#mylink");

- Pieter

Answer 1

您可以使用jQuery的hover方法来跟踪：

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!

- SLaks

---

如果元素有子元素，这样做会更好，因为您不希望在堆栈上触发太多的over/out事件，但OP没有指定JQuery。此外，它无法处理绝对定位并堆叠在一起的项目 - 对于这种情况，您需要更复杂的逻辑。 - Plynx

@Plynx：是的，但是jQuery方法是最简单的。 - SLaks

这似乎是一个不错的解决方案，但我在尝试从其他函数访问数据时遇到了问题。$("div.menu").hover( function() { $.data(this, 'hover', true); alert($("div#menu1").data('hover')); // 调试 }, function() { $.data(this, 'hover', false); alert($("div#menu1").data('hover')); // 调试 } ); 调试警报在这里可以正常工作，但如果我在此代码块之外执行它，它往往会出现问题，并产生“null”结果。有什么想法吗？ - Pieter

在第一次mouseenter之前，不会有任何数据。按照我的编辑添加.data('hover', true)。 - SLaks

嗯，它有不均匀数量的 '}'。 - rix

Answer 2

是的，在经典的JS中：

document.getElementById("mylink").onmouseover = function() { alert("Hover!"); }
document.getElementById("mylink").onmouseout  = function() { alert("Out!"); }

在jQuery中：

$('#mylink').mouseover(function() {
  alert("Hover!");
});

- Pekka

---

@Slaks，没错，你的jQuery方案更好。 - Pekka

$('a#mylink') 将是最佳实践。 - dmanexe

@dmanexe 是的，但是ID必须是唯一的，所以这并不重要。 - Pekka

@Pieter 有什么反对 SLak 方法的吗？我认为它正好符合你的需求。 - Pekka

是的，我在尝试构建的项目中遇到了应用该原则的困难。我将在几分钟内添加一条评论。 - Pieter

Answer 3

我不确定这是否是最好的方法，但如果您正在使用jQuery，可以尝试以下方式：

var hoveringOver = false;

$("a#myLink").bind("mouseenter", function(){
hoveringOver = true;
});

$("a#myLink").bind("mouseleave", function(){
hoveringOver = false;
});

function isHoveringOver(){
return hoveringOver;
}

- Jon

---

如果该元素有子元素，这种方法无法正常工作。您需要处理 mouseenter 和 mouseleave 事件。 - SLaks

@SLaks，感谢您的建议，我想我已经解决了它！我也从您对问题的回答中学到了一些东西，非常棒！ - Jon

它仍然无法正常工作。你根本不应该处理mouseover和mouseout。 - SLaks