在按钮悬停时更改跨度标签答案

【问题标题】：change span tag on hover of button在按钮悬停时更改跨度标签
【发布时间】：2014-04-15 18:58:23
【问题描述】：

我在按钮中有一个 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>

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

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

【问题讨论】：

你的 HTML 是什么样的？没有它，我们就无能为力了
你能提供一个jsfiddle吗？
索引 wordpesss 主题中的某些内容一直覆盖我的子 CSS 样式。

标签： html css hover

【解决方案1】：

你应该可以做这样的事情：

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

当按钮改变时，这应该会改变 spans 的外观。

小提琴：http://jsfiddle.net/DbpgW/

【讨论】：