CSS鼠標經過遮罩效果可以給網頁設計增加一些視覺上的美感和互動性。下面將介紹如何實現這一效果。

/* 創建一個遮罩蒙層 */
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
/* 當鼠標經過時，遮罩蒙層變為不透明 */
.img:hover .mask {
opacity: 1;
}

以上代碼中，我們首先創建一個遮罩蒙層，將其寬高設為100%、不透明度設為0，這樣剛打開頁面時遮罩蒙層將不可見。接著，我們使用CSS過渡效果（transition）和透明度屬性（opacity）讓遮罩蒙層在0.5秒內從完全透明到完全不透明過渡，形成一個淡入淡出的效果。最后，我們將遮罩蒙層和圖片容器（img）設置為同一元素，這樣當鼠標經過圖片時遮罩蒙層的透明度就會變為1，實現遮罩效果。