網頁設計和開發(fā)中，為了增加用戶體驗和頁面互動性，常常需要使用鼠標懸浮出現(xiàn)遮罩的效果。這個特效很容易實現(xiàn)，只需要使用 CSS 就可以了。

.wrapper {
position: relative;
display: inline-block;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: none;
z-index: 1;
}
.wrapper:hover .mask {
display: block;
}

上述代碼中，我們先創(chuàng)建了一個外層容器div，并將其設置為相對定位。這個容器可以放置我們想要出現(xiàn)遮罩效果的元素，例如圖片、文字等等。

接下來，我們創(chuàng)建了一個.mask類，它的定位方式是絕對定位，充滿了整個包含容器，擁有了半透明的黑色背景。這個類的display屬性被設置為none，初始狀態(tài)下是隱藏的。

最后，我們使用 CSS 選擇器，設置鼠標懸浮在.wrapper上時，.mask就顯示出來。而當鼠標離開時，.mask又隱藏。

這是一個簡單、實用的 CSS 特效，可以輕松地實現(xiàn)鼠標懸浮出現(xiàn)遮罩的效果。增加用戶體驗和頁面互動性，讓網頁變得更加生動有趣。