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

This question already has an answer here:

这个问题在这里已有答案：

• How can I change a button's color on hover? 3 answers
• 如何在悬停时更改按钮的颜色？ 3个答案

I need change button background color on hover.

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

My CSS on jsfiddle: CSS

关于jsfiddle我的CSS：CSS

My HTML :

我的HTML：

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

DEMO

DEMO

5 个解决方案

#1

You can achieve it in the following way. This solution will work if you add this class at the bottom of your CSS.

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

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

If you keep this class in top of the other styles, you need to use important keyword to overcome with other styles like below.

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

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

DEMO

DEMO

#2

you might use this solution as !important make the CSS invalid. In this case all the type= button which have .btn class will only affected.

你可以使用这个解决方案！重要的是使CSS无效。在这种情况下，所有具有.btn类的type =按钮只会受到影响。

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

#3

you can achieve using the below

你可以实现以下使用

.btn:hover{
//apply styles here
}

#4

this is really easy, you just have to add the css selector :hover

这很简单，你只需要添加css选择器：悬停

for example:

例如：

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

#5

You can use :hover with the class for the mouse hover event. Like if you want you can use:

您可以使用：将鼠标悬停在类的鼠标悬停事件中。如果你想要，你可以使用：

btn:hover {
   color:blue; 
}

best of luck

祝你好运