Kindly test this codepen on both a) Firefox and b) Chrome. Follow these steps:
- Hover over the link with your mouse
- Click on the link and do not move the mouse cursor afterwards
- Wait for the page to reload.
If you haven't moved the mouse cursor, it will still be hovering over the link after the page reloads.
Firefox will now display the styles assigned to the :hover pseudo-class.
On Chrome (Mac OS X), the element will show its non-hovered state, which is preferable in this case.
Is there anyone who knows which browser handles this correctly, and how to make one browser behave like the other?
In my current situation, I'm looking for a way to prevent :hover from being activated immediately after a page reload. I would prefer to avoid using JavaScript for this purpose.
Just to provide all the necessary information, here's the code snippet from the demo:
<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: I was just informed by a colleague that Chrome behaves differently on OS X compared to Windows. Can someone provide more details about this issue?