css - 悬停在按钮上时只有部分文本发生变化

Question

我希望将鼠标悬停在按钮上时，按钮中文本的字体颜色变为白色且没有下划线。

目前，只有当您将鼠标悬停在文本本身上时，文本颜色才会发生变化，而当您将鼠标悬停在按钮上时，文本颜色不会发生变化。因此，当您移到按钮上方时，文本将保持黑色，直到您移到该文本上方为止。

在这里您可以找到 css here

HTML:

<a><button class="btn-free-trial btn-xs">free trial</a>

CSS:

button.btn-free-trial {
    background-color: #FBFAFA;
    border: 1px solid;
    border-color: #FB684C;
    padding: 4px 8px;
    -webkit-border-radius: 4px;
}

button.btn-free-trial:hover {
    background-color: #FB684C;
    color: #FFF;
}

button.btn-free-trial a {
    color: #3C3735;
}

button.btn-free-trial a:hover {
    color: #FFF;
}

Answer 1

首先你忘记关闭按钮的结束标签</button> .

<a><button class="btn-free-trial btn-xs">free trial</button></a>

其次，您不需要同时使用 <a>和 <button> ,

<button class="btn-free-trial btn-xs">free trial</button>
<a class="btn-free-trial btn-xs">free trial</a>

检查这个 jsfiddle http://jsfiddle.net/yKvRw/11/