悬停在负载上不起作用

Question

演示：http://jsbin.com/afixay/3/edit

1）将光标放在红框

上

2）不要移动光标，只需按ctrl + r（页面应该重新加载）

3）你不会得到警报。

嗯，一旦你将其移开/悬停，你就会收到警报。问题是，当光标放在页面加载的红框上时，hover事件不会被触发（也没有mouseenter）。

我该如何解决这个问题？

我知道，浏览器的工作似乎是正确的，但我真的需要知道一个元素是否悬停，即使在页面加载时也是如此。

$(function() {
  function hovered(e){
      e.type == 'mouseenter' ? alert('on') : alert('off'); 
  }

  $('.box').hover(hovered);
});

Answer 1

无论如何，你无法做到这一点，而不是纯粹的JS。

1. 在发生事件之前，您无法在初始页面加载时手动获取鼠标位置。 X和Y位置为0.因此无法确定鼠标是否已经在元素上。

2. 在移动之前不会触发任何鼠标事件。您可以听取mousemove立即回复，但仍然无法满足您的需求。

评论中指出的CSS trick是你得到的最接近的，但它不是一个可靠的解决方案。