html - a:link 的锚点需要不同颜色的跨度，a:hover 相同

Question

我有一个链接，其中嵌入了一个跨度，其中包含一个“小于”箭头<，后跟一个nbsp和一些文本：

<a href=".."><span class="smallbutton">&lt;</span>&nbsp;back to overview</a>

我希望整个锚点都是灰色文本，除了<应该是白色的。整个锚点在悬停时应该是橙色文本，但我无法让它工作......我想知道是否可以仅使用 CSS，但我对此表示怀疑。

造型（目前最接近的尝试）：

.smallbutton {
    background-color: #AAAAAA;
    border-radius: 8px 8px 8px 8px;
    color: white;
    display: inline-block;
    height: 20px;
    text-align: center;
    width: 20px;
}
.smallbutton:hover {
    background-color: #DDDDDD;
    color: inherit;
}
a:link, a:visited {
    color: gray;
    text-decoration: none;
}
a:active {
    color: #FC930A !important;
    text-decoration: none;
}
a:hover, a:focus {
    color: #F7C41F !important;
    text-decoration: none;
}

问题是，我希望!important覆盖white但它没有......

这是jsfiddle：http: //jsfiddle.net/2GX2Y/

<只是将鼠标悬停在包含标签上时，应该有颜色<a>，而不仅仅是它<本身。

Answer 1

我想如果你改变

.smallbutton:hover

到

a:hover .smallbutton

then you'll have what you want. But I may have misunderstood the question.

Just let me know!

Here is the example http://jsfiddle.net/tRRRV/1/