CSS點擊切換圖標的實現

代碼示例： 
HTML：
<div class="icon"><i class="fa fa-star"></i></div>
CSS：
.icon{
cursor: pointer;
font-size: 40px;
}
.icon i{
color: #FFD700;
}
.icon.active i{
color: #FF8C00;
}

CSS點擊切換圖標的實現詳解

在一些網站的界面中，經常會出現一些圖標在點擊后改變其狀態或顏色。通過CSS，可以實現點擊切換圖標的效果。下面將介紹如何使用CSS點擊切換圖標。

首先，在HTML中添加需要點擊的元素，并給其添加類名。例如下面的代碼，將使用Font Awesome添加一個星形圖標。

<div class="icon"><i class="fa fa-star"></i></div>

接著，在CSS中，為這個元素添加cursor: pointer;樣式，使鼠標懸浮在該元素上時呈現手指形狀，并設置字體大小等樣式。同時，需要為圖標的初始狀態設置顏色。

.icon{
cursor: pointer;
font-size: 40px;
}
.icon i{
color: #FFD700; /* 初始為金色 */
}

最后，在CSS中添加點擊時切換圖標顏色的效果。使用.active類來切換，初始情況下不使用該類。點擊時添加該類，取消點擊時移除該類的樣式。

.icon.active i{
color: #FF8C00; /* 切換為橙色 */
}

點擊切換圖標樣式的關鍵在于active類的添加和移除，可以使用JavaScript或jQuery等腳本語言來實現添加和移除active類的效果。

總結

1. 在HTML中設置需要點擊的元素，并添加class屬性；
2. 在CSS中設置該元素的cursor: pointer;樣式；
3. 設置圖標的初始狀態樣式；
4. 使用.active類來切換圖標顏色；
5. 使用腳本語言實現active類的添加和移除。