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

Question

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

Ben*_*rds 2 html javascript css jquery

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

问题是JS加载的可能性比CSS慢,而且黑客攻击CSS不适合这个问题.

情况

我有一个主页动画.在页面加载时,我有一堆从左边进来的图像和一个从右边进来的绝对锚标记div(每行约2个案例),它们在中间滑动并相遇.页面加载后,我设置一个计时器来浏览图像堆栈,并突出显示相应的锚标签.

问题是当用户将鼠标悬停在任何锚标签上时,此计时器会中断,当发生这种情况时,相应的图像会淡入.此交互可能正好在页面加载时.

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

我试过的

我不能简单地删除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');
    }
}

Run Code Online (Sandbox Code Playgroud)

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

有什么建议？

Answer 1

Fre*_*all 7

CSS:

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

Run Code Online (Sandbox Code Playgroud)

JS:

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

Run Code Online (Sandbox Code Playgroud)

HTML:

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

Run Code Online (Sandbox Code Playgroud)

确保阻止div接近body标签,以确保没有捕获/冒泡问题.

归档时间：	14 年，6 月前
查看次数：	2475 次
最近记录：	8 年，10 月前