Home/ Questions/Q 7659845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:23:11+00:00

I’ve looked at some similar posts regarding interaction delay after page load, but I

  • 0

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:

//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');
    }
}

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    make sure the blocker div is close to the body tag to insure no capture/bubbling issues.

    • 0