CSS是網頁布局的重要組成部分，其中對于鼠標經過時的效果掌握也是很重要的一部分。本文將重點介紹如何在CSS中鼠標經過時元素透明度變化的效果。

/* 設置元素初始透明度為1，即不透明 */
element {
opacity: 1;
}
/* 鼠標經過時元素透明度變為0.5 */
element:hover {
opacity: 0.5;
}

上述代碼使用了CSS中的opacity屬性。該屬性用于設置元素的透明度，取值范圍為0到1，值越小越透明，越大越不透明。

在CSS中，我們可以使用:hover偽類，即鼠標懸停時應用的樣式。當鼠標經過時，元素的opacity屬性即會改變。

以下是一個簡單的例子，當鼠標經過照片時，圖片會變為半透明狀態，鼠標移出時又會恢復為不透明狀態：

<style>
img {
opacity: 1;
transition: all 0.3s ease-in-out;
}
img:hover {
opacity: 0.5;
}
</style>
<img src="image.jpg" alt="照片">

上面的代碼中，我們為圖片設置了transition屬性，即過渡效果，使變化過程更加平滑。

總結來說，通過使用CSS中的opacity屬性和:hover偽類，我們可以簡單地實現鼠標經過時元素透明度的變化效果。