如何仅在单击时使用CSS更改按钮的颜色？

Question

我知道有一个活动状态但是在我点击按钮后它会出现并停留。有没有办法我可以用CSS改变按钮的颜色，以显示当鼠标悬停在按钮上并单击时。

我在想的同时也是Focus和Active的CSS选择器。有没有这样的事情或方式我能做到这一点。这就像我在Stackoverflow上看到的那样，但点击时颜色会发生变化，当我将光标移开时会消失。

Answer 1

我从你的问题中得到的是，你想要一个按钮在点击后改变它的颜色？如果是这样，您可以尝试使用JQuery添加css()函数，该函数允许您更改元素的属性。因此，要在单击按钮后更改按钮的背景颜色，您可以调整以下代码：

＆＃13;

＆＃13;

$("button").click(function(){
    $(this).css("background-color", "red");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

或者只是使用普通的CSS：

button:hover:focus

希望这有帮助！

Answer 2

请查看以下示例，看看这是否是您想要的。

JSFiddle1

input {
    background: #2e9ec7;
}
input:active {
    background: #2fa832;
    }

<input type="submit"></input>

JSFiddle2

input {
    background: #2e9ec7;
}
input:hover, input:active {
    background: #2fa832;
    }

<input type="submit"></input>

希望这有帮助。

Answer 3

如果可以使用jquery，请使用mouseup和mousedown事件。在按钮的mousedown事件设置颜色和mouseup事件上，将颜色设置回单击它之前的颜色。

Answer 4

<input type="submit">
input {
    background: blue;
}
input:active {
    background: red;
}

当它处于活动状态时，颜色将为红色。除了那一刻，它将是蓝色的。此外，您可以通过设置color属性而不是background属性来仅更改文本颜色。