在页面加载时禁用鼠标悬停功能3秒钟

disable mouseover-ability on page load for 3 seconds

本文关键字：鼠标 悬停 功能 3秒钟 加载      更新时间：2023-09-26

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

问题是JS的加载速度很可能比CSS慢，而破解CSS并不能解决这个问题。

情况

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

问题是，当用户悬停在任何一个锚点标签上时，这个计时器就会中断，当这种情况发生时，相应的图像就会淡入。这种交互可能就在页面加载时。

是否有任何可能的方法在页面加载/延迟时禁用锚点标签a:hover？

我尝试过的

我不能简单地删除a:hover类并将其替换为另一个背景色：transparent的类，因为我的JS仍然使用onHover函数（我可能只针对更改后的类使用onHove。）

当鼠标不小心悬停在上时，我可以在mouseenter上向页面加载上的每个锚标记发出警报

//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（）），这样会有延迟，但这也会在页面加载后生效

有什么建议吗？

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 -->

确保blocker-div靠近body标记，以确保没有捕获/冒泡问题。

如果您的页面一开始链接没有用锚标记包装，并且在3秒钟后使用setTimeout-onLoad附加标记，会怎么样？

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

$("a").mouseover(function(event) {
  event.preventDefault();
  // Run any other needed code here
});
(function(){
  $("a").unbind('mouseover');
}).delay(2000); // delay 2 seconds

最好在您知道所有图像都已加载后运行解除绑定代码

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

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

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