光标是否位于元素上方页面加载时？

问题描述

| 我有一个分配给元素的.hover（）动作来隐藏/显示某些内容，具体取决于光标在其上方。我遇到的问题是，当页面加载并且光标在OVER元素上时，它没有注册为结束，因为它没有触发mouseenter事件。 还有另一种方法来判断光标是否在所需元素上吗？     

解决方法

使用页面加载时的鼠标位置，您可以调用

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

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

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

    ,如果在页面加载完成之前隐藏元素，然后一次显示所有元素，那么鼠标悬停事件现在会触发吗？

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

然后使用javascript删除display：none on page load。 我认为您的mouseevent将在显示元素后立即触发。     ,下一个和上一个导航按钮在设计一致的页面之间导航时，我也遇到了这个问题。 用户将单击“下一步”转到下一页，并且由于其鼠标在第二页的页面加载中位于相同位置，因此他们能够再次单击“下一步”以继续浏览页面集合。本质上是方便的下一个/上一个UI。 当然，第二页及后续页面在页面加载时不会显示悬停状态。 因此，我添加了一个url参数（action = \'next或action = prev），然后在加载时，如果存在相关的url参数，则将下一个或上一个按钮置于悬停状态。如果用户以某种方式移动了鼠标并且没有在按钮上方，那么在第一个mousemove事件之前，您的按钮确实处于悬停状态。 它并不完美，它仅适合特定情况，即用户在您网站的页面内使用一致的UI，但是由于这种UI非常普遍-尤其是在博客/图库中，我虽然提到过它。     ,这是从页面加载开始跟踪鼠标位置的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。     ,加载时获取鼠标坐标的脚本