2

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

目前，文本颜色仅在您将鼠标悬停在文本本身时发生变化，而在将鼠标悬停在按钮上时尚未更改。因此，当您移过按钮时，文本将保持黑色，直到您移过文本。

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

3 回答 3

1

首先，您忘记关闭 button 的结束标签</button>。

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

其次，您不需要同时使用<a>and <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/

于 2013-09-13T17:22:22.470 回答
0

you forget to close the button tag 

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

after doing this the button hover will display correctly

于 2013-09-13T17:16:44.630 回答
0

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

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

https://validator.w3.org/

于 2019-07-25T04:59:32.337 回答