如何在悬停时更改链接特定部分的颜色？

Question

很难解释所以我有一个例子

我的左侧部分应保持黑色，右侧部分为绿色，在悬停时变为红色，请参阅http://jsfiddle.net/z9jSS/

我希望这看起来相同，但我想让左侧部分也是一个链接，当我将鼠标悬停在第一个链接上时，正确的部分会改变颜色。我知道如何禁用下划线但我不知道该怎么办是没有让左边的部分在悬停时变红，而右边的部分会改变颜色 http://jsfiddle.net/z9jSS/2/

是否有一些技巧我可以这样做a：悬停会使颜色变为红色但强制左侧部分保持黑色？

Answer 1

只需覆盖跨度的样式：

.c a { text-decoration: none; color: inherit; }
.c a:hover .r { color:red; text-decoration: underline; }

代码：http://jsfiddle.net/z9jSS/21/

Answer 2

似乎上面的一切都遗漏了一件事或另一件事。这包括您要求的所有内容，部分链接为纯黑色文本，其余为绿色下划线链接，在悬停时变为红色。

http://jsfiddle.net/z9jSS/30/

.c a          { color: black; text-decoration: none; }
.c a .r       { color: green; text-decoration: underline; }
.c a:hover .r { color: red;   text-decoration: underline; }

Answer 3

将锚点的一部分包裹在范围或其他标记中

尝试this jsfiddle

Answer 4

试试这个：

.c a {
    color: #000;
    text-decoration: none
}
.c a span:first-child + span {
    text-decoration: underline;
    color: green;
}
.c a:hover span:first-child + span {
    color: red
}

请参阅： http://jsfiddle.net/thirtydot/z9jSS/31/

这样做的好处是不需要.l或.r类。

除IE6外，它适用于所有浏览器。

Answer 5

使用更高的特定样式覆盖样式。

.c a:hover span.l { color: blue; }

<强> Working Example