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

那么你会得到你想要的东西。但我可能误解了这个问题。

请告诉我！

以下是示例http://jsfiddle.net/tRRRV/1/

在锚点中需要不同颜色的span：a链接，同样适用于：hover

1 个答案: