2

I'm looking for a simple way to persist a "hover" style on a page refresh if the user did not move his mouse. The issue is that the hover style is only triggered on a mouse enter/mouseover event, so on a page refresh it will not be applied even if the cursor is above the item in question until the user touches the mouse again and moves it slightly. The code below has this issue. 

$('div').click(function () {
     window.location.reload();
});
div {
   width: 100px;
   height: 100px;
   background: grey;
}
div:hover {
   background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
oogwayXachilles
  • 21
  • 4
  • Does this answer your question? [Remember div hover state after page refresh](https://stackoverflow.com/questions/25518283/remember-div-hover-state-after-page-refresh) – YT_Xaos Dec 11 '21 at 22:53
  • Note that this behavior appears to only exist in OSX Chrome -- on my OSX Firefox this behaves as desired. [This question](https://stackoverflow.com/questions/39370325/hover-triggered-directly-after-page-reload-on-firefox-but-not-on-mac-os-x-chro) has more context, though in that one OP wanted the opposite behavior. – timtim17 Dec 11 '21 at 22:56
  • This happens in Firefox Windows. The hover effect start on mouse move at least 1 pixel. I think it is normal. – vee Dec 11 '21 at 23:03
  • 1
    Why are you using jQuery in 2021? It's been unnecessary for easily 8+ years now. – Dai Dec 12 '21 at 01:02

1 Answers1

0

can you set the a:visited { background-color:black;color:#fff} Of course this would apply to the whole page so all your visited backgrounds would be black. I've never tried to marry div a:visited{background-color:black;color:#fff;} so not sure that would work. They say nothing ventured, nothing gained.

GailV
  • 11
  • 2