点击后的CSS更改按钮样式

Question

我想知道是否有方法在点击后在css中更改按钮的样式，因此不是element:active。 谢谢！

Answer 1

如果您正在寻找纯CSS选项，请尝试使用：focus伪类。

#style { 
    background-color: red; 
} 

#style:focus {  
    background-color:yellow;  
} 

Answer 2

只有通过选择按钮的活动和焦点伪元素才能使用CSS。

button:active{ 
    background:olive; 
} 

button:focus{ 
    background:olive; 
} 

见codepen：http://codepen.io/fennefoss/pen/Bpqdqx

你也可以写一个简单的jQuery的点击功能，改变背景颜色。

HTML：

<button class="js-click">Click me!</button> 

CSS：

button { 
    background: none; 
} 

的JavaScript：

$(".js-click").click(function() { 
    $(".js-click").css('background', 'green'); 
    }); 

看看这个codepen：http://codepen.io/fennefoss/pen/pRxrVG

Answer 3

什么是你的代码，但吨？如果它是一个标签，那么你可以这样做：

a { 
 
    padding: 5px; 
 
    background: green; 
 
} 
 
a:visited { 
 
    background: red; 
 
}

<a href="#">A button</a>

或者你可以使用jQuery添加一个类上点击，如下图所示：

$("#button").click(function() { 
 
    $("#button").addClass('button-clicked'); 
 
});

.button-clicked { 
 
    background: red; 
 
}

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

Answer 4

如果你的按钮是一个<a>元素，你可以使用:visited选择器。

但是，您是有限的，你只能改变：

• 颜色
• 背景色
• 边框颜色（及其子属性）
• 轮廓色
• 的颜色部分的填充和笔画属性

我还没有阅读this article about revisiting the :visited但也许有些聪明的人发现了更多的方法来破解它。

Answer 5

每个环节有五个不同的状态：link，hover，active，focused和visited。

Link是外观正常，hover是当你鼠标，active是被点击时的状态，focused如下积极visited是你最终的状态，当你在无焦点最近点击链接。

我猜你想实现在任focus或visited不同的风格，那么你可以添加以下的CSS：

a { color: #00c; } 
a:visited { #ccc; } 
a:focused { #cc0; } 

推荐的顺序在你的CSS不会造成任何麻烦的是以下：

a 
a:visited { ... } 
a:focused { ... } 
a:hover { ... } 
a:active { ... } 

您可以使用Web浏览器的开发者工具，迫使装置的状态是这样的（铬 - >开发工具/检查元素 - >风格 - >筛选：HOV）： Force state in Chrome Developer Tools