CODEWITHSUNDEEP
htmlcssgoogle-chromehover
scar
scar

Reputation: 165

Reset hover state when leaving current website

I have a link (styled as a button):

<a href="http://externalsite" class="button" target="_blank">go to external site</a>

And I have a hover on this button class, like:

.button {
  background-color: green;
}

.button:hover {
  background-color: red;
}

So far, no problem. I hover the button, it turns red. I click it and a new page opens in a new tab. When I go back to my website the hover is gone and the button is green again. BUT that only works in some browsers!

In chrome (my version 47.0.2526.80) my button hovers red, I click on the external page and when I go back to my site the button still shows the hovered red color. Only if I move my cursor the hover deactivates. Like somehow the hover is sticky. Has anyone experienced this issue? Is this a browser bug? Any ideas for a workaround?

Upvotes: 2

Views: 445

Answers (2)

Chris Ryer
Chris Ryer

Reputation: 101

a:visited, a:focus { 
    color: green;
}

try that - if not it may just be chrome

Upvotes: 0

Mikkel Fennefoss
Mikkel Fennefoss

Reputation: 911

Use focus, it did the trick for me :)

Here is a codepen

http://codepen.io/anon/pen/YwEvod

.button:focus {
  background-color: green;
}

Upvotes: 0

Related Questions