禁用鼠标悬停能力3秒

我已经看了关于页面加载后的交互延迟一些类似的帖子，但我似乎无法找到关于经典的一个东西：悬停禁用。禁用鼠标悬停能力3秒

的问题是，JS会加载最有可能慢于CSS，和黑客CSS是不会对这个问题的工作。

形势

我有一个主页的动画。在页面加载时，我有一堆从左边进来的图像和一个从右边进来的绝对定位标签div（每行~2个），它们都在中间滑动和相遇。在页面加载后，我设置了一个定时器来浏览图像堆栈，并且相应的锚点标记将突出显示。

的问题是，这个定时器被打破，当用户将鼠标悬停在任何锚标记，而当这种情况发生时，相应的图像中消失。而且这种互动可能是正确的页面加载。

是否有任何可能的方式禁用锚定标记a：悬停在页面加载/延迟？

我已经试过

我不能简单地删除：悬停类与背景色取代它：透明的，因为我的JS还是拿起onHover选项功能（我能目标onHover选项只对改变阶级也许..）

我能够与的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（）），以便有延迟，但这也会在页面加载后生效。

有什么建议吗？

来源

2012-03-19 Ben Sewards

为什么不只是有那么默认情况下禁用悬停功能页面加载后启用它？ – jli 2012-03-19 20:21:36

权利或之后，你说你是无论如何监视进度您的图像加载。 – 2012-03-19 20:28:09

它停用，直到它被称为上的document.ready低于图像的初始滑动。这个想法的问题是仍然存在CSS类t帽子不能被禁用，所以即使这个想法不会阻止我最初的循环动画，它仍然看起来很丑。 – 2012-03-19 20:35:53

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

来源

2012-03-19 20:23:15 Fresheyeball

-.-这是一个很简单的想法，我很高兴你与我分享这个。在页面加载时是否有任何使用阻断器的缺点？ – 2012-03-19 20:30:50

不行，它只是工作。我一直这样做。 – Fresheyeball 2012-03-19 20:32:30

这也是我所建议的。去这个吧。 – Turnip 2012-03-19 20:33:00

，如果你的页面开始了你的链接不与锚标签包裹，并且您使用的setTimeout的onLoad的标签3秒后追加？

来源

2012-03-19 20:25:01 huzzah

它正在document.ready上调用，这是我相信的上下文。你知道是否可以在单独的页面加载时设置一个超时，只调用悬停方法？ – 2012-03-19 20:29:42

我不知道我在那里跟着你。 – huzzah 2012-03-19 20:35:34

没有测试过这一点，但防止默认值可能为你”你知道毕竟图像加载

您可能还需要修改所有选择

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

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

更好的运行解除绑定代码工作给一个标签。

类

来源

2012-03-19 20:26:59

有点晚了讨论，但在情况下，它可以帮助别人，我在CSS中添加pointer-events: none到body元素（使用名为pointer-none类，然后延迟一段时间后用JavaScript删除它解决了我的问题。

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

来源

2017-11-03 12:45:31 Bekah

禁用鼠标悬停能力3秒

回答

相关问题