CSS 鼠標經過圖標是網頁設計中常用的交互效果，能夠增加頁面的趣味性和互動性。

/* HTML 代碼 */
<div class="icon">
<i class="fa fa-home"></i>
</div>
/* CSS 代碼 */
.icon {
width: 50px;
height: 50px;
}
.icon i {
font-size: 30px;
color: #333;
transition: all 0.3s ease;
}
.icon:hover i {
color: #ff6347;
font-size: 40px;
}

以上代碼中，我們首先定義了一個icon樣式，用來設置圖標的尺寸。接著，在icon元素中嵌套了一個i標簽，使用了Font Awesome圖標庫提供的fa-home圖標。在i元素中，我們設置了字體大小和顏色，并使用transition屬性為圖標變化添加了過渡效果。

當鼠標經過icon元素時，我們使用:hover偽類選擇器選擇了i元素，并改變了其字體大小和顏色，從而實現了圖標的放大和顏色變化效果。

除了這種基本的鼠標經過圖標效果，我們還可以添加更多的交互效果，比如旋轉、彈跳、旋轉等等。

.icon:hover i {
transform: rotate(360deg);
}
.icon:hover i {
animation: bounce 0.5s ease;
}
@keyframes bounce {
0% {transform: translateY(0);}
50% {transform: translateY(-20px);}
100% {transform: translateY(0);}
}

以上代碼分別實現了圖標的旋轉和彈跳效果。我們可以使用CSS3的transform屬性對圖標進行旋轉、縮放等變換操作。而使用@keyframes制作關鍵幀動畫，可以讓圖標進行更復雜的動作。

總之，鼠標經過圖標是一種簡單而有趣的交互效果，通過調整CSS樣式和添加動畫效果，我們可以讓這種效果更加生動、多彩。