将鼠标悬停在按钮上时仅更改部分文本答案

【问题标题】：only partial text change on hover over button将鼠标悬停在按钮上时仅更改部分文本
【发布时间】：2013-09-18 11:06:24
【问题描述】：

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

目前，文本颜色仅在您将鼠标悬停在文本本身时才会更改，而在将鼠标悬停在按钮上时不会更改。因此，当您移过按钮时，文本将保持黑色，直到您移过文本。

在这里你可以找到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;
}

【问题讨论】：

标签： css button hover twitter-bootstrap-3

【解决方案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/

【讨论】：

【解决方案2】：

你忘记关闭按钮标签

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

执行此操作后，按钮悬停将正确显示

【讨论】：

【解决方案3】：

看着你的小提琴，我发现有一些重要的变化。它们是：

您在标签内使用按钮，这是一种逻辑错误的方法。如果您想调用其中的任何操作，请使用带有href="#link" 的标签或按钮。
创建标签后尝试先关闭标签，然后在其中写入内容。这将避免忘记结束标签等错误。
如果您对自己的编码逻辑有信心，但找不到像忘记结束标记这样的语法错误，请在 W3C Validator 上验证您的代码。这将使您在语法上完美。这是链接：

https://validator.w3.org/

【讨论】：