html - :hover triggered directly after page reload on Firefox (but not on Mac OS X Chrome) -

please check this codepen a) firefox , b) chrome. proceed follows:

1. move mouse on link
2. click link , not move mouse cursor @ afterwards
3. wait until page has reloaded.

if haven't moved mouse cursor, still above link after page has reloaded.

firefox apply :hover styles now.

chrome (mac os x) display element in it's non-hovered state (which prefer in scenario).

anyone here has idea browser right, , how 1 browser mimic other's behaviour?

for current scenario, i'd know how avoid :hover being triggered directly after page reload. i'd quite unhappy if had resort javascript that.

for completeness' sake, here's demo's code:

<a href="https://codepen.io/connexo/pen/pejbqj" target="_top">this codepen</a> 

a {   color: #333;   background-color: #ddd;   display: inline-block;   line-height: 40px;   padding: 20px;   text-decoration: none;   transition-duration: .4s;   &:before {     content: "non-hovered";   }   &:hover {     background-color: #a00;     color: white;     &:before {       content: "hovered state";     }   } } 

edit: 1 of colleagues told me, seems chrome behaves in described way on os x, not on windows. can elaborate on whole issue?

which behaviour correct?

difficult correct behaviour w3c spec not go particular detail mechanics of :hover pseudo class:

the :hover pseudo-class applies while user designates element pointing device, not activate it. example, visual user agent apply pseudo-class when cursor (mouse pointer) hovers on box generated element.

the user action pseudo-classes :hover, :active, , :focus

both actions seem reasonable given circumstances.

how avoid :hover being triggered directly after page reload.

in particular case appears want disable hover state until user has moved mouse, achieve following:

• add css property pointer-events: none; link on page load. disable mouse events on link
• attach move event body gets activated once when user moves mouse (after gets unbound)
• in move event set pointer-events: auto; on link enable mouse events on it

$("a").css("pointer-events", "none");  $("body").one("mousemove", function() {    $("a").css("pointer-events", "auto");  });

a {    color: #333;    background-color: #ddd;    display: inline-block;    line-height: 40px;    padding: 20px;    text-decoration: none;    transition-duration: .4s;  }  a:before {    content: "non-hovered";  }  a:hover {    background-color: #a00;    color: white;  }  a:hover:before {    content: "hovered state";  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <a href="#" target="_top"></a>

the example best viewed in either codepen or js fiddle given stack snippet collapsed default.