CSS可以通過改變字體顏色來響應(yīng)用戶點(diǎn)擊事件,這種交互方式可以讓網(wǎng)頁更加生動、有趣,下面是一種實(shí)現(xiàn)方法:
1、給需要點(diǎn)擊變顏色的字體添加一個CSS類,比如.clickable-text
。
2、在CSS中定義這個類的默認(rèn)顏色和點(diǎn)擊后的顏色。
.clickable-text { color: blue; /* 默認(rèn)顏色 */ } .clickable-text:active { color: red; /* 點(diǎn)擊后的顏色 */ }
3、在JavaScript中添加一個事件監(jiān)聽器來觸發(fā)CSS類的變化。
document.querySelector('.clickable-text').addEventListener('click', function() { this.classList.add('active'); // 添加active類來觸發(fā)顏色變化 });
這樣,當(dāng)用戶點(diǎn)擊帶有.clickable-text
類的字體時,字體顏色就會從默認(rèn)顏色變?yōu)辄c(diǎn)擊后的顏色,如果需要恢復(fù)默認(rèn)顏色,可以使用classList.remove('active')
來移除active
類。
這種方法僅適用于支持CSS偽類:active
的瀏覽器,如果需要兼容老版本的瀏覽器,可以使用其他方法來實(shí)現(xiàn)點(diǎn)擊變顏色的效果,比如使用JavaScript來動態(tài)改變字體顏色。