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/

Answer 2

您忘记关闭按钮标记

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

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

Answer 3

看看您的小提琴，我发现了一些重要的重要变化。这些是：

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

https://validator.w3.org/

悬停在按钮上时仅部分文本更改

3 个答案: