Is there a way to unset an 'a' tag link to the default color

Question

I have an 'a' tag that is a normal link to another webpage.

I want to disable the default link appearance unless the mouse cursor is hovering over the link, when the default normal link appearance should be restored.

This is what I have tried so far:

(HTML)

   <a href="example.com">example</a>

(CSS)

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: unset;
    text-decoration: underline;
}

JS fiddle example of that code here

The problem is that during the mouse hover the link color remains black, and does not unset or restore to the original link blue. Is there a special CSS keyword for "original setting" or something like that?

Answer 1

The value for original setting you're looking for is called initial.

a:hover {
    color: initial
}

However, that might make the link black. Which means it wouldn't work for you in this case. You can get around this another way though, through your a style. Use the inverse of :hover using the :not selector.

a:not(:hover){
  color: #000;
  text-decoration: none;
}

<a href="#">Hi, I'm Link.</a>

The way it works is applying the style to your link, as long as it's not the hover effect. a alone would style the :hover too, which we don't want.

Or if that doesn't work in your environment, you could style the link with the default colors:

a { color: #000; text-decoration: none; }

a:hover {color: #0000EE; text-decoration: underline; }

<a href="#">Hi, I'm Link.</a>

That should work everywhere, as it's a regular color change. However, do note that the default color might slightly vary browser to browser... the perk of this is that the color stays the same across all browsers, I guess.

The difference between the middle and last piece of code is that the middle one uses the default browser settings, while the last one pushes in your own blue.