Question

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

问题是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（））以便有延迟，但这也会在页面加载后生效。

有什么建议吗？

Answer 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标签，以确保没有捕获/冒泡问题。

Answer 2

如果您的网页开始时链接未包含锚标记，并且您使用setTimeout onLoad在3秒后附加标记会怎么样？

Answer 3

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

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

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

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

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

Answer 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);
}

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

4 个答案: