CSS Text Color not changing-CodePudding

I've been trying to change the color of my text (Normal and Hover) but nothing seems to work. Tried !important but still not showing. Have tried looking at other answers but didn't work. CSS & HTML Div Code (I have tried removing text-decoration none)

#five {
  position    : fixed;
  top         : 10px;
  right       : 100px;
  font-family : monospace;
  font-weight : bold;
  font-size   : 16px;
  color       : red!;
}

#five:hover {
  color       : black;
  text-shadow : 5px 5px 5px red;
}

<p id="five">
  <a href="UNKNOWN" target="_target" style="text-decoration: none;">
    TEST5
  </a>
</p>

CodePudding user response：

You need to style the a tag, not the parent.

#five a {
  text-decoration: none;
  color: red;
}

#five:hover a {
  color: black;
}

This happens because the <a> tag applies its own color by default (which is a benefit in most cases, but in your case you have to manually change the color directly by using the a selector).

Complete, fixed code:

#five {
  position: fixed;
  top: 10px;
  right: 100px;
  font-family: monospace;
  font-weight: bold;
  font-size: 16px;
}

#five:hover {
  text-shadow: 5px 5px 5px red;
}


/* this what I added */

#five a {
  text-decoration: none;
  color: red;
}

#five:hover a {
  color: black;
}

<p id="five">
  <a href="#" target="_target">TEST</a>
</p>

CodePudding user response：

Hi it's because you need to colour the a tag so you could add a class or id to the a tag and then change that.

Change the css to this:

.five {
  position: fixed;
  top: 10px;
  right: 100px;
  font-family: monospace;
  font-weight: bold;
  font-size: 16px;
  color: red!;
}

.five:hover {
  color: black;
  text-shadow: 5px 5px 5px red;
}

And change the html to this:

<p id="five"><a  href="UNKNOWN" target="_target" style="text-decoration: none;">TEST5</a></p>