If you're looking to style your website differently for mobile devices, you can utilize CSS media queries and filters as explained in the W3 documentation. For example, you can set a rule that changes the color of links on hover to orange only if the device supports hover functionality:
@media not all and (hover: none) {
a:hover{
color: orange
}
}
Alternatively, you can use JavaScript to detect mobile browsers and adjust the styles accordingly by setting the link color to always be orange on mobile.
The issue you might be facing is due to the difference in behavior between clicking and hovering. On desktop, you typically need to hover over a button before clicking it, causing the color change. However, on mobile, this interaction might occur after clicking instead.
Update: A user named Temani Afif mentioned in a comment that on mobile devices, :hover pseudo-classes are translated into something like :onclick to accommodate the lack of hover functionality. This translation allows mobile users to access features that rely on hover interactions, such as hover menus on websites.
Another approach you can take is to enforce the color of visited links using the following CSS:
a:visited {
color: orange!important;
}
Update 2: I have added a new media tag and incorporated advice from this post on how to effectively use @media rules along with the 'not' keyword in CSS styling.