CSS 實現點擊后變色

我們可以使用 CSS 來實現對一個特定元素的點擊事件，比如當鼠標點擊后可以更改元素的樣式，這在網頁開發中是非常常見的一個特性。

基本思路

我們需要定義一個 CSS 類，當元素被點擊時，將這個類添加到元素上，使其改變顏色等樣式。

HTML

<div class="clickable">Click me!</div>

CSS

.clickable {
background-color: blue;
color: white;
padding: 10px;
cursor: pointer;
}
.clickable.clicked {
background-color: red;
}

JavaScript

const clickable = document.querySelector('.clickable');
clickable.addEventListener('click', function() {
clickable.classList.add('clicked');
});

解釋說明

上面的代碼中，我們定義了一個 class 名為 clickable，其中定義了一些基本樣式，當點擊該元素時，我們使用 JavaScript 為它添加了一個叫做 clicked 的 class，這時候我們就可以使用 CSS 實現 click 之后的樣式更改了。在這個例子中，我們將背景色更改為紅色。

總結

CSS 實現點擊后更改樣式是一種常見的網頁特性，可以大幅增強網頁的用戶交互性。希望本文的講解能夠幫助各位更好地掌握這一特性。