Question

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 1

在<code>块内指定锚标签，如下所示：

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

以下是其中的一个小提琴：https://jsfiddle.net/gcbvduyb/

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

也可以。

Answer 2

假设真正的问题是一个特殊问题，因为规则赋予code指定的颜色，我可以推荐两种方法。首先，您可以为规则a code指定颜色。

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

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

另一种是允许code继承其颜色，如果它在锚标记中。

code{color:red;}
a code{color:inherit}
a:hover{color:green}

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

Answer 3

a:link {
  color: blue;
  background-color: transparent;
  text-decoration: underline;
}