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

编程入门行业动态更新时间:2024-10-17 21:27:36

在页面加载时禁用鼠标悬停功能3秒钟(disable mouseover-ability on page load for 3 seconds)

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

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

情况

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

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

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

我试过的

我不能简单地删除a：hover类，并将其替换为另一个background-color：transparent，因为我的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（）），以便延迟，但是页面加载后也会生效。

有什么建议么？

I've looked at some similar posts regarding interaction delay after page load, but I can't seem to find anything regarding the classical a:hover disable.

The problem is that JS will load most likely slower than the CSS, and hacking CSS isn't going to work for this problem.

Situation

I have a home page animation. On page load, i have a stack of images coming in from the left and a div of absolute anchor tags coming in from the right (~ 2 cases per line), which both slide and meet in the middle. After page load, I set a timer to go through the stack of images, and the corresponding anchor tag highlights.

The problem is that this timer is broken when the user hovers over any of the anchors tags, and when this happens, the corresponding image fades in. And this interaction could be right on page load.

Is there any possible way of disabling anchors tags a:hover on page load/delay?

What I've tried

I cannot simply remove the a:hover class and replace it with another one of background-color:transparent, because my JS still picks up the onHover function (I could target onHover only for that changed class maybe..)

I am able to target each of the anchor tags on page load with an alert on mouseenter when accidentally hovering over:

Another thing I might be able to try is calling setTimeOut(function(){ onHover()) so that there is a delay, but that will effect after page load as well.

Any suggestions?