更改按钮悬停时的跨度标记 [英] change span tag on hover of button

问题描述

我在按钮中有一个span标记。当我悬停按钮时，我只想让span文本在从白色悬停到黑色时改变。现在唯一的方法是将鼠标悬停在span标签上，然后鼠标指针必须完全位于按钮内的文本上。

I have a span tag within a button. I just want the span text to change on hover from white to dark when I hover the button. The only way right now it will work is if I put the hover on the span tag itself and then the mouse pointer has to be exactly on the text within the button. If not the whole button is white on hover.

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);
}
`

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

I can not change the way the button is setup because its part of a theme.

这是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>

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

I actually went ahead and setup a fiddle for this. And it actually works on the fiddle. So perhaps this means something is interfering with it. But I can not determine what would be.

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

推荐答案

您应该可以这样做：

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

这会改变按钮更改时的跨度外观。

This should change the spans appearance when the button is changed.

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

这篇关于更改按钮悬停时的跨度标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！