vsoftco vsoftco - 1 month ago 5
CSS Question

How to change the color of hyperlink if using <code> as the link's title

I have some hyperlinks with titles inside

<code>
</code>
, such as:

<a href="http://some_link"> <code>Title</code> </a>


How can I change the color of the hyperlink when the mouse hovers on it? I first tried adding to the
.css
file

a:hover {
color: red;
}


but this doesn't do it, only the regular hyperlinks are colored. I then tried

a:hover, code:hover {
color: red;
}


which almost works, but it also colors non-hyperlink
<code>
sections, such as

<code> some code here </code>


How can I color only the
<code>
hyperlinks, excluding the
<code>
non-hyperlinks, when the mouse hovers over them?

Answer

Assuming the real issue is a specificity issue because of a rule giving code a specified color, I can recommend two approaches. The first is that you can specify a color for the rule a code.

code{color:red;}
a:hover, a:hover code{color:green}
<a href="http://some_link"> <code>Title</code> </a>

The other is to allow code to inherit its color if it's in an anchor tag.

code{color:red;}
a code{color:inherit}
a:hover{color:green}
<a href="http://some_link"> <code>Title</code> </a>

Comments