I've recently noticed that the phone number in the footer of our website was being turned into a link automatically by mobile browsers, which made the number so dark it couldn't be seen. I added some style coding to make the hyperlink text default to white, however in the section of the website that have a white background, now have invisible links unless you rollover them. Any pointers on how to resolve this?
Code:
<style>
a:link {
color: grey;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>