在CSS中，我們可以通過改變鼠標(biāo)懸浮時(shí)的樣式來實(shí)現(xiàn)圖標(biāo)變色，以下是一個(gè)簡單的示例，展示了如何將一個(gè)圖標(biāo)在鼠標(biāo)懸浮時(shí)變色：

我們需要一個(gè)HTML元素來承載我們的圖標(biāo)，比如一個(gè)div元素：

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

在這個(gè)示例中，我們使用了Font Awesome庫來創(chuàng)建一個(gè)圖標(biāo)。

我們需要編寫CSS來定義圖標(biāo)在鼠標(biāo)懸浮時(shí)的樣式，我們可以使用:hover偽類來實(shí)現(xiàn)：

.icon:hover {
  color: red; /* 將圖標(biāo)顏色變?yōu)榧t色 */
}

在這個(gè)CSS中，我們將.icon類中的color屬性在鼠標(biāo)懸浮時(shí)變?yōu)榧t色，這樣，當(dāng)鼠標(biāo)懸浮在圖標(biāo)上時(shí)，圖標(biāo)的顏色就會變?yōu)榧t色。

如果你想要更復(fù)雜的樣式變化，比如添加陰影、放大等效果，你可以繼續(xù)在:hover偽類中添加樣式規(guī)則。

.icon:hover {
  color: red; /* 將圖標(biāo)顏色變?yōu)榧t色 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加陰影 */
  transform: scale(1.2); /* 放大圖標(biāo) */
}

在這個(gè)示例中，我們添加了一個(gè)陰影效果和一個(gè)放大效果，讓圖標(biāo)在鼠標(biāo)懸浮時(shí)更加突出和吸引人。