在页面加载时禁用鼠标悬停能力 3 秒答案

【问题标题】：disable mouseover-ability on page load for 3 seconds在页面加载时禁用鼠标悬停能力 3 秒
【发布时间】：2017-11-03 20:45:31
【问题描述】：

我看过一些关于页面加载后交互延迟的类似帖子，但我似乎找不到任何关于经典 a:hover 禁用的信息。

问题在于 JS 的加载速度很可能比 CSS 慢，而修改 CSS 并不能解决这个问题。

情况

我有一个主页动画。在页面加载时，我有一堆从左侧进入的图像和一个从右侧进入的绝对锚标签的 div（每行约 2 个案例），它们在中间滑动和相遇。页面加载后，我设置了一个计时器来遍历图像堆栈，并突出显示相应的锚标记。

问题在于，当用户将鼠标悬停在任何锚点标签上时，此计时器会被破坏，并且当这种情况发生时，相应的图像会淡入。并且这种交互可能正好在页面加载时。

有什么方法可以在页面加载/延迟时禁用 锚定标签 a:hover？

我的尝试

我不能简单地删除 a:hover 类并将其替换为另一个 background-color:transparent，因为我的 JS 仍然选择 onHover 函数（我可能只针对该更改的类定位 onHover ..）

当不小心将鼠标悬停在鼠标输入上时，我可以在页面加载时定位每个锚标记：

//on page load, disable mouse-over ability on anchor tags
var disableOnLoad = function (ev) {
    var target = $(ev.target);
    var casesId = target.attr('id');

    //if mouse is over one of the cases
    if (target.is(".cases")) {
        //disable CSS a:hover
        $(this).removeClass('homeText a:hover');
    }
}

我可以尝试的另一件事是调用 setTimeOut(function(){ onHover()) 以便有延迟，但这也会在页面加载后生效。

有什么建议吗？

【问题讨论】：

为什么不默认禁用悬停功能，然后在页面加载后启用它？
在您的图像加载之后或之后，正如您所说的那样，无论如何您都在监控该进度。
在图像初始幻灯片下方的 document.ready 上调用它之前，它会被禁用。这个想法的问题是仍然有一个不能被禁用的 CSS 类，所以即使这个想法不会阻止我最初的循环动画，它仍然看起来很丑。

标签： javascript jquery html css

【解决方案1】：

CSS：

 #blocker{
      position:fixed;
      width:100%;
      height:100%;
      left:0;
      top:0;
      right:0;
      bottom:0;
      z-index:9999;
 }

JS：

 setTimeout(function(){
      $('#blocker').remove();
 }, 3000);

HTML：

 <body>
      <div id="blocker" ></div>
      <!-- your stuff -->

确保拦截器 div 靠近 body 标签，以确保没有捕获/冒泡问题。

【讨论】：

-.- 这是一个非常简单的想法，很高兴你与我分享了这个。在页面加载时使用拦截器有什么缺点吗？
这也是我的建议。和这个一起去。
在页面加载 PLUS 3 秒之前，您不会看到该 div 内的任何内容，对吗？
假设您的意思是拦截器 div，其中不应该有任何内容。它只是将鼠标从页面内容中阻止 3 秒，然后 div 被销毁。
我应该将拦截器*放在带有锚标签的 div 中吗？还是因为它是固定的，在外面？

【解决方案2】：

如果您的页面开始时您的链接没有使用锚标签包裹，并且您在 3 秒后使用 setTimeout onLoad 附加标签怎么办？

【讨论】：

它在 document.ready 上被调用，我相信这与上下文相同。您知道是否可以在仅调用悬停方法的单独页面加载上设置超时？
我不确定我在那儿跟着你。

【解决方案3】：

尚未对此进行测试，但防止默认设置可能对您有用"

$("a").mouseover(function(event) {
  event.preventDefault();
  // Run any other needed code here
});

(function(){
  $("a").unbind('mouseover');
}).delay(2000); // delay 2 seconds

知道所有图片都加载完毕后，最好运行解绑代码

您可能还想将选择器从所有 a 标签修改为 a.class

【讨论】：

【解决方案4】：

讨论有点晚了，但如果它对其他人有帮助，我通过将pointer-events: none 添加到 CSS 中的 body 元素来解决我的问题（使用名为 pointer-none 的类，然后在之后使用 JavaScript 将其删除延迟。

var timeout;
window.onload = function(){
  timeout = setTimeout(function(){
    document.querySelector('body').classList.remove('pointer-none');
  }, 1500);
}

【讨论】：