CSS中定義div移動(dòng)遮罩的方法有很多種，下面就介紹其中的一種方法：

HTML代碼：
<div class="parent">
<div class="mask"></div>
<div class="content">這是需要被遮罩的元素</div>
</div>
CSS代碼：
.parent {
position: relative;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5); /*半透明黑色*/
z-index: 1;
display: none;
}
.content {
z-index: 2;
}

這段代碼中，首先我們創(chuàng)建了一個(gè)父級(jí)元素div，這個(gè)div的position屬性被設(shè)置為relative，這是因?yàn)槲覀冃枰谶@個(gè)div的內(nèi)部創(chuàng)建一個(gè)絕對(duì)定位的遮罩元素。接著，我們?cè)诟讣?jí)元素內(nèi)部放置了3個(gè)子元素，其中第一個(gè)子元素類名為mask，它就是我們的遮罩元素；第二個(gè)子元素類名為content，它是需要被遮罩的元素；第三個(gè)子元素我們可以先不理會(huì)。

接下來(lái)，我們對(duì)三個(gè)子元素分別進(jìn)行了CSS樣式的設(shè)置。我們首先設(shè)置遮罩元素的position屬性為absolute，這是因?yàn)槲覀兿Ｍ鄬?duì)于父級(jí)元素進(jìn)行定位。然后我們將它的top、left屬性都設(shè)置為0，這是因?yàn)槲覀兿胍屨谡衷馗采w父級(jí)元素的整個(gè)區(qū)域。接下來(lái)我們?cè)O(shè)置遮罩元素的寬高都為100%。最后我們?cè)O(shè)置遮罩元素的背景色為半透明黑色。這里我們使用rgba()函數(shù)來(lái)指定顏色，它的最后一個(gè)參數(shù)是透明度，取值范圍為0～1。其中，1表示完全不透明，0表示完全透明。這里我們?cè)O(shè)置為0.5，表示半透明。我們還設(shè)置了遮罩元素的z-index屬性為1，這是因?yàn)槲覀兿胍采w在需要被遮罩的元素之上。最后我們將它的display屬性設(shè)置為none，表示一開(kāi)始它是不可見(jiàn)的。

現(xiàn)在我們就可以看到，遮罩元素已經(jīng)覆蓋在了需要被遮罩的元素上方。接下來(lái)我們需要添加一些JavaScript代碼，以便讓遮罩和需要被遮罩的元素進(jìn)行交互：

JS代碼：
var parent = document.querySelector('.parent');
var mask = document.querySelector('.mask');
parent.addEventListener('mouseover', function() {
mask.style.display = 'block';
});
parent.addEventListener('mouseout', function() {
mask.style.display = 'none';
});

這段代碼中，我們首先使用querySelector()方法獲取到父級(jí)元素和遮罩元素。然后我們給父級(jí)元素添加了兩個(gè)事件監(jiān)聽(tīng)器。當(dāng)鼠標(biāo)移入父級(jí)元素時(shí)，我們把遮罩元素的display屬性設(shè)置為block，這樣它就會(huì)顯示出來(lái)；當(dāng)鼠標(biāo)移出父級(jí)元素時(shí)，我們把遮罩元素的display屬性再次設(shè)置為none，這樣它就會(huì)隱藏起來(lái)。

有了這些代碼，我們的移動(dòng)遮罩效果就實(shí)現(xiàn)了。你可以試著將上面的HTML和CSS代碼放入一個(gè)HTML文件中，保存后用瀏覽器打開(kāi)，就可以看到這個(gè)效果了。如果你想要嘗試更多的CSS遮罩效果，可以繼續(xù)學(xué)習(xí)CSS的各種屬性和技巧。