我的博客模拟了一个终端屏幕,所以当鼠标悬停时,普通文本是绿色的,链接是红色的,背景是红色的。由于我在整个博客中使用等宽字体,<code>
因此将其样式设置为具有绿色背景以区别于常规文本。同样,<code>
内部<a>
有一个红色背景,当鼠标悬停时会变暗。有关实时版本,请参阅此测试页面。
这是标签的 CSS(此处为完整文件) :<a>
a {
color:#CD0000;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a:hover {
background-color:#440000;
}
对于<code>
标签内的<a>
标签:
a code {
/* Only apply this to code that is a hyperlink */
color: #161616;
background-color: #CD0000;
border-radius: 5px;
padding: 0 2px 0px 2px;
text-decoration:none;
transition: background-color .6s;
-webkit-transition: background-color .6s; /* Safari and Chrome */
-moz-transition: background-color .6s; /* Firefox 4 */
-o-transition: background-color .6s; /* Opera */
}
a code:hover {
background-color:#440000;
border-radius: 5px;
padding: 0 2px 0px 2px;
}
问题是,当我将鼠标悬停在诸如 之类的链接上时,和标签<a href='#'><code>long code</code></a>
的背景都被转换了。这里有两张图片可以说明这一点。在第一张图片中,我设法将鼠标指针仅放在元素上。在第二种情况下,鼠标悬停在元素上:<code>
<a>
<a>
<code>
有没有办法让链接的样式<code>
与普通链接不同?先感谢您。