javascript - disable mouseover-ability on page load for 3 seconds - Stack Overflow

admin管理员组

文章数量:1335624

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 ing in from the left and a div of absolute anchor tags ing 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?

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 ing in from the left and a div of absolute anchor tags ing 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?

• javascript
• jquery
• html
• css

Share Follow asked Mar 19, 2012 at 20:17 Ben SewardsBen Sewards 2,66122 gold badges2727 silver badges4343 bronze badges 3

• 1 Why not just have the hover functionality disabled by default then enable it after page load? – jli Commented Mar 19, 2012 at 20:21
• right or after your images are loaded as you stated you were monitoring that progress anyhow. – Tim Wickstrom Commented Mar 19, 2012 at 20:28
• it's disabled until it's called on document.ready below the initial slide in of the images. The problem with this idea is that there still is a CSS class that can't be disabled, and so even though this idea won't stop my initial cycle animation, it will still look ugly. – Ben Sewards Commented Mar 19, 2012 at 20:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

Bit late to the discussion, but in case it helps anyone else, I solved my problem by adding pointer-events: none to the body element in CSS (using a class called pointer-none, and then removing it with JavaScript after a delay.

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

What if your page started out with your links as NOT wrapped with anchor tags, and you use a setTimeout onLoad to append the tags 3 seconds later?

Have not tested this but prevent default may work for you"

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

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

Better to run the unbind code after you know all images are loaded

you may also want to modify the selector from all a tags to a.class

本文标签： javascriptdisable mouseoverability on page load for 3 secondsStack Overflow