如果使用<code>作为链接标题，如何更改超链接的颜色

Question

我在<code> </code>中有一些带有标题的超链接，例如：

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

当鼠标悬停在超链接上时，我如何改变超链接的颜色？我第一次尝试添加到.css文件

a:hover {
    color: red;
}

但这并不能做到，只有普通的超链接是彩色的。然后我试着

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

它几乎可以工作，但它也显示非超链接<code>部分，如

<code> some code here </code>

当鼠标悬停在<code>超链接上时，我怎么能只给它们着色，不包括<code>非超链接？

Answer 1

假设真正的问题是一个特定的问题，因为规则给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 2

在<code>块中指定锚标记，如下所示：

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

下面是它在行动中的一个小提琴：https://jsfiddle.net/gcbvduyb/

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

也能起作用。

Answer 3

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

请检查此链接：-http://www.thesitewizard.com/css/links-mouseover.shtml