在網頁開發中，我們經常會使用CSS來設置字體樣式。但是，有時候我們需要在用戶點擊某個字體時，讓它的顏色暫時改變，然后再恢復原來的顏色。今天，我們就來講一下如何實現這個效果。 首先，我們需要給字體加上一個點擊事件。我們可以使用JavaScript來監聽鼠標點擊事件，然后在事件處理函數中改變字體的顏色。假設我們要實現的效果是：鼠標點擊字體時，字體變成紅色，然后在1秒鐘后恢復原來的顏色。代碼如下：

<script>
var fonts = document.getElementsByTagName("p");
for (var i = 0; i < fonts.length; i++) {
fonts[i].addEventListener("click", function() {
var self = this;
self.style.color = "red";
setTimeout(function() {
self.style.color = "";
}, 1000);
});
}
</script>

上面的代碼會給頁面上所有的

元素添加點擊事件，并且在點擊時將字體顏色設置為紅色，然后在1秒鐘后將顏色恢復。 接著，我們需要設置鼠標懸停在字體上時的鼠標樣式。當用戶將鼠標懸停在可點擊的字體上時，我們希望鼠標變成手型。我們可以使用CSS的:hover偽類來實現這個效果。代碼如下：

p:hover {
cursor: pointer;
}

上面的代碼會將可點擊的字體的鼠標樣式設置為手型。 最后，我們需要設置點擊后的字體樣式。在上面的代碼中，我們將字體設置為紅色并在1秒鐘后恢復了原來的顏色。但是，如果我們希望點擊時字體的樣式有其他的改變，該怎么做呢？我們可以使用CSS的:active偽類來實現這個效果。代碼如下：

p:active {
color: green;
font-weight: bold;
}

上面的代碼會在用戶點擊字體時將字體顏色設置為綠色，并且字體加粗。 綜上所述，我們可以使用JavaScript和CSS來實現字體點擊后回復原色的效果。通過添加點擊事件、設置鼠標樣式和使用:active偽類，我們可以實現讓用戶在點擊字體時獲得更好的交互體驗。