Question

我有一个.hover（）动作分配给一个元素来隐藏/显示某些东西，具体取决于光标在它上面。我遇到的问题是，当页面加载并且光标超过元素时，它不会注册为因为它没有触发mouseenter事件而结束。

是否有另一种方法来判断光标是否在所需元素上？

Answer 1

在页面加载时使用鼠标位置可以调用

var currentElement = document.elementFromPoint(x, y);

然后，如果在该位置找到的元素是具有悬停事件的元素。您可以手动触发该悬停事件

$(currentElement).trigger('hover');

Answer 2

如果您在页面完成加载之前隐藏元素，然后立即显示它们，那么您的鼠标悬停事件现在会被触发吗？

<div id='allmyelementsinhere' style='display:none'>

然后使用javascript删除显示：页面加载时无。

我想你的鼠标事件会在你显示元素后立即激活。

Answer 3

我在下一个和上一个导航按钮中也存在此问题，这些按钮可在一致设计的页面之间导航。

用户将单击下一步转到下一页，并且由于他们的鼠标位于第二页的页面加载中的相同位置，因此他们可以再次单击下一步以继续浏览页面集合。基本上是一个方便的下一个/上一个UI。

当然除了第二页和后续页面的页面加载中没有显示悬停状态。

所以我添加了一个url参数（action ='next或action = prev），然后在加载时，如果存在相关的url参数，我将下一个或上一个按钮置于悬停状态。如果用户以某种方式移动了他们的鼠标并且没有超过按钮，那么在第一次mousemove事件之前，你的鼠标悬停状态就会出现错误。

它并不完美，它只适合用户在您网站的页面中使用一致用户界面的特定情况，但由于这种用户界面相当普遍 - 特别是在博客/画廊中，我提到它

Answer 4

这是从页面加载开始跟踪鼠标位置的jquery方法。

(function($) {
  $.mousePos = {x: 0, y: 0};
  var recordPos = function(e) {
    $.mousePos.x = e.pageX;
    $.mousePos.y = e.pageY;
  };
  $(document).mousemove(recordPos).mouseover(recordPos);
})(jQuery);

一旦鼠标开始与页面进行交互，这将填充 $。mousePos.x 和 $。mousePos.y 。

Answer 5

Script to get mouse coordinates on load

光标是否在元素上（在页面加载时）？

5 个答案: