CSS - 悬停时更改按钮背景颜色[重复]答案

【问题标题】：CSS - Change button background color on hover [duplicate]CSS - 悬停时更改按钮背景颜色[重复]
【发布时间】：2014-09-09 06:59:09
【问题描述】：

我需要在悬停时更改按钮背景颜色。

我在 jsfiddle 上的 CSS： CSS

我的 HTML：

<input type='button' class='btn btn-default btn-success btn-lg' value='test'/>

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过以下方式实现它。如果您在 CSS 底部添加此类，此解决方案将起作用。

.btn:hover
{
background-image:none;
background-color:#ff00ff;
}

如果您将此类保持在其他样式的顶部，则需要使用important 关键字来克服其他样式，如下所示。

.btn:hover
{
background-image:none !important;
background-color:#ff00ff !important;
}

【讨论】：

【解决方案2】：

您可以使用此解决方案，因为!important 使 CSS 无效。在这种情况下，所有具有.btn 类的type= button 只会受到影响。

input[type="button"].btn:hover{background:red;}

【讨论】：

@user3272321 我建议您不要在 CSS 文件中使用 !important，因为在 w3c 验证器中您的 CSS 文件将失败。你可以试试上面的方法。更好的处理方式。

【解决方案3】：

你可以使用下面的实现

.btn:hover{
//apply styles here
}

【讨论】：

【解决方案4】：

这真的很简单，你只需要添加 css 选择器 :hover

例如：

.btn-success:hover{
    color: #ffffff;
   background-color: #51a351;
}

【讨论】：

【解决方案5】：

您可以将 :hover 与鼠标悬停事件的类一起使用。如果你愿意，你可以使用：

btn:hover {
   color:blue; 
}

祝你好运

【讨论】：