Why are hover styles applied on tap on mobile devices?

Question

My button changes its color on :hover, see:

button {
  background-color: orange;
}

button:hover {
  background-color: darkorange;
}

Example: https://jsfiddle.net/oepb5ks4/

Works great on desktop, but on mobile - where :hover should not exist – the browser* still changes the color, but after touching the button.

1. Why is that behavior? Am I missing something? What makes somebody think that implementing (parts of) :hover on mobile browsers makes any sense?
2. Is there a nice and clean solution for this (preferably without Media Queries or JavaScript)?

*Tested in Chrome (in "Device Mode") as well as in iOS Safari.

Answer 1

In you CSS you could filter for mobile devices with the @media rules and filters (documentation at w3). You could state "if the media has the hover functionality then the hover color should be orange":

@media not all and (hover: none) {
    a:hover{
        color: orange
    }
}

You also could try to detect it with JS and manually adjust the color to always be orange when on mobile.

I believe that your problem occurs because in order to click on a button on PC you must have hovered over it before, so the color changes on mobile after you clicked it.

Update I just read the comment under the question by Temani Afif: apparently :hovers are "converted" to something like :onclick on mobile because of the lack of the hover feature on phones. As many websites have on hover menus mobile users couldn't access those if they wouldn't translate it.

Another thing you could try is to force the color of the visited links with this:

a:visited { 
  color: orange!important;
}

Update 2 Included the new media tag and took advice from this answer on a different question and it's comment on how to use not and the @media rules.