點擊後的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