html - 在按钮悬停时更改跨度标签

Question

我在按钮中有一个 span 标签。当我悬停按钮时，我只希望跨度文本在悬停时从白色变为深色。现在唯一可行的方法是，如果我将鼠标悬停在 span 标记本身上，然后鼠标指针必须正好位于按钮内的文本上。如果不是整个按钮在悬停时是白色的。

a.sf-button.transparent-dark span {

}

a.sf-button.transparent-dark span:hover {

}

a.sf-button.transparent-dark {
    color: #FFF;!important;
    background-color: #12225b;
}

a.sf-button.transparent-dark:hover {
    color: #666;!important;
    background-color: #FFF;
    border: 1px solid #222;
    border: 1px solid rgba(34,34,34,.2);
}

a.sf-button, a.sf-button:hover, #footer a.sf-button:hover {
    color: #666;
    background-color: #FFF;
    border: 1px solid #222;
    border: 1px solid rgba(34,34,34,.2);
}
`

我无法更改按钮的设置方式，因为它是主题的一部分。

这是 HTML:

<a class="sf-button large transparent-dark stroke-to-fill " href="https://www.domain.com" target="_self"><span class="text">button text</span></a>

我实际上继续为此设置了一个 fiddle 。它实际上适用于 fiddle 。所以也许这意味着有什么东西在干扰它。但我无法确定会是什么。

http://jsfiddle.net/robmcmon/4ZWUX/

Answer 1

你应该能够做这样的事情:

.test-button:hover .test-span {
   color: #ff0000;
}

这应该会在更改按钮时更改 span 外观。

fiddle :http://jsfiddle.net/DbpgW/