鼠標經過內容變換是一種常見的網頁交互效果。它可以讓頁面中的元素在用戶鼠標懸停時發生變化，從而帶給用戶更好的視覺體驗。在 Web 開發中，我們可以使用 CSS 來實現這種效果。

首先，我們需要為鼠標經過時要變換的元素設置一個默認的樣式：

.box {
width: 100px;
height: 100px;
background-color: #ccc;
transition: background-color 0.2s ease;
}

上面的 CSS 代碼中，我們定義了一個名為 .box 的 class，它表示一個正方形的盒子。我們將其背景顏色設置為灰色，同時指定了一個變換的過渡效果，并將其應用到 .box class 中。

接下來，我們需要為鼠標懸停時要變換的樣式設置一個偽類：

.box:hover {
background-color: #f00;
}

上面的代碼中，我們使用了一個偽類選擇器 :hover 來表示當鼠標懸停在 .box 元素上時的樣式。在這個例子中，我們將 .box 的背景顏色樣式修改為紅色。

通過上述代碼，我們就實現了當鼠標懸停在 .box 元素上時背景顏色發生變化的效果。同時，我們也可以根據實際需求，對元素的其他屬性進行變換操作。