CSS鼠標顯示和隱藏div元素是網頁設計中常用的一種效果。通過CSS的:hover偽類和display屬性，我們可以實現鼠標懸停在某個元素上時，顯示另一個元素；鼠標離開時，隱藏該元素。這種效果可以用于菜單和彈出框等場景，使頁面更加交互和用戶友好。
，我們來看一個簡單的例子。假設我們有一個包含兩個div元素的父元素，一個是被隱藏的元素，另一個是顯示的元素。我們希望當鼠標懸停在父元素上時，顯示被隱藏的元素，鼠標離開時隱藏該元素。下面是對應的HTML和CSS代碼：

html
<div class="parent">
<div class="hidden">隱藏的元素</div>
<div class="show">顯示的元素</div>
</div>

css
.parent:hover .hidden {
display: block;
}
<br>
.parent .hidden {
display: none;
}

以上代碼中，.parent:hover .hidden表示當鼠標懸停在.parent元素上時，選擇子元素.hidden并改變它的display屬性為block，使其顯示出來。而.parent .hidden選擇元素.parent下的子元素.hidden，將其display屬性設為none，使其初始狀態為隱藏。
接下來，我們看另一個例子。假設我們有一個導航欄，每個導航項都對應一個顯示的下拉菜單。我們希望當鼠標懸停在導航項上時，顯示對應的下拉菜單；鼠標離開后，隱藏該下拉菜單。
以下是HTML和CSS代碼：

html
<ul class="navbar">
<li class="navitem">
導航項1
<div class="dropdown">下拉菜單1</div>
</li>
<li class="navitem">
導航項2
<div class="dropdown">下拉菜單2</div>
</li>
<li class="navitem">
導航項3
<div class="dropdown">下拉菜單3</div>
</li>
</ul>

css
.navitem:hover .dropdown {
display: block;
}
<br>
.dropdown {
display: none;
}

在這個例子中，當鼠標懸停在.navitem元素上時，選擇子元素.dropdown并改變其display屬性為block，使其顯示出來。而.dropdown選擇所有的下拉菜單元素，將其display屬性設為none，使其初始狀態為隱藏。
通過以上幾個例子，我們可以看到通過CSS的:hover偽類和display屬性，我們可以實現鼠標顯示和隱藏div元素的效果。這種效果不僅可以用于菜單和彈出框，還可以應用于其他需要交互效果的場景。通過掌握這種技巧，我們能夠更好地設計網頁，提升用戶體驗，使頁面更加吸引人。