CSS鼠標碰上半遮蓋是一個常見的網頁交互效果，它可以使得用戶在鼠標碰到特定元素時，元素的一部分內容會被遮蓋并顯示另一部分的內容，從而給用戶帶來更好的用戶體驗。 想要實現這個效果，我們可以使用CSS中的偽元素:before和:after來實現。通過設置半透明的背景和絕對定位，實現遮蓋部分的顯示。具體的代碼如下： `````` 在上面的代碼中，我們首先創建了一個包含文字的div，將其寬度和高度設定為300px和200px，并設置了背景為半透明的白色。然后我們通過設置overflow:hidden來隱藏div中超出部分的內容。 接下來，我們通過:hover偽類來控制鼠標碰到div時的效果。通過:before和:after偽元素的設置，我們給div的第一半部分設置了紅色的遮蓋，在第二半設置了綠色的遮蓋。 這里我們使用了絕對定位來控制偽元素的位置和大小，并為偽元素設置了半透明的顏色來實現遮蓋效果。最后，通過content屬性來指定偽元素的內容。 這樣，在鼠標碰到div時，用戶就會看到一個半遮蓋的效果，用于提示一些特殊的信息或者展示更多的內容。 需要注意的是，這種效果雖然看起來很不錯，但也可能會對網頁的性能造成一定的影響，因此不要濫用。如果要使用這種效果，建議僅在需要時使用，并在使用時考慮性能問題，以確保用戶體驗的順暢和快速。