CSS鼠標經過出現遮罩是一種常見的前端開發技術，它能夠使網頁動態化，增強用戶體驗。

.container {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 24px;
text-align: center;
padding-top: 80px;
}
.container:hover .mask {
display: block;
}

上述代碼實現了當鼠標懸停在元素上時，會出現一個遮罩層，這個遮罩層可以用來顯示更多信息或者添加交互元素。下面是代碼的詳細解釋：

• `.container`是包裹元素，需要設置`position: relative;`實現遮罩層的絕對定位。
• `.mask`是遮罩層，需要設置`position: absolute;`和`display: none;`來隱藏它。`top: 0;`和`left: 0;`是為了覆蓋整個容器，`width: 100%;`和`height: 100%;`是為了撐滿容器。`background-color: rgba(0,0,0,0.5);`是背景顏色，使用rgba顏色可以讓遮罩層半透明，避免完全遮蓋元素。`color: #fff;`和`font-size: 24px;`分別設置文字顏色和大小，`text-align: center;`用于居中文字，`padding-top: 80px;`是為了讓文字距離容器頂部一定距離。
• `.container:hover .mask`是鼠標懸停時觸發的樣式，通過設置`display: block;`來顯示遮罩層。

通過這種方式，我們可以很方便地為網頁添加一些交互效果，豐富用戶體驗，同時也能提高網頁的可用性。