CSS鼠標移上顯示div效果是一種常用的Web頁面交互效果，它可以讓用戶在鼠標移動到某個區域時立即顯示相應的信息，為用戶的瀏覽體驗提供了很大的便利。這種效果可以通過CSS代碼來實現，下面我們來看一下具體的實現方法。

<div class="container">
<div class="box">
<p>鼠標移上來我就會顯示了！</p>
<div class="popup">Look at me now!</div>
</div>
</div>

上面的代碼中，通過一個container容器和一個box元素來實現效果。box元素中包含了一個p標簽作為鼠標的觸發區域，以及一個popup元素作為鼠標移上去時要顯示的內容。接下來我們就需要使用CSS代碼來實現鼠標移上顯示div的效果了。

.box {
position: relative; /* 重要：如果不加這個屬性，popup元素會顯示在整個頁面的最上面 */
}
.popup {
display: none; /* 先將popup元素隱藏起來 */
position: absolute; /* 使popup元素相對于box元素進行定位 */
top: 100%; /* 將popup元素的頂部與box元素的底部對齊 */
left: 0; /* 將popup元素的左側與box元素的左側對齊 */
padding: 10px; /* 給popup元素添加一些內邊距使它更好看 */
background: #fff; /* 設置popup元素的背景色為白色 */
}
.box:hover .popup {
display: block; /* 當鼠標移到box元素上時，將popup元素顯示出來 */
}

上面的CSS代碼中，我們通過改變.box:hover .popup的display屬性來實現鼠標移上去時要顯示的內容。具體來說，我們將popup元素默認隱藏起來，當鼠標移上去.box元素時，利用:hover偽類選擇器將popup元素的display屬性切換為block，即可實現鼠標移上顯示div的效果。