CSS（層疊樣式表）是一種用于網頁設計和排版的標記語言，它可以實現許多有趣和實用的效果。其中之一是在移動到某個 div 上時顯示或隱藏其他 div。這種效果可以使網頁更加交互和生動。在本文中，我們將詳細介紹如何使用 CSS 實現這一效果，并提供幾個代碼案例作為參考。
，讓我們來看一個簡單的代碼示例。在這個示例中，有兩個 div，一個是目標 div，當鼠標移動到上面時，另一個 div 將顯示出來，移開鼠標時又隱藏起來。

<p>下面是一個簡單的示例</p>
<pre>
<style>
.container {
width: 200px;
height: 200px;
background-color: #f0f0f0;
position: relative;
}
<br>
   .target {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<br>
   .hidden {
display: none;
}
<br>
   .container:hover .hidden {
display: block;
}
</style>
<br>
<div class="container">
<div class="target">移動到這里</div>
<div class="hidden">顯示這個</div>
</div>

我們定義了一個容器 div，它具有相對定位，并設置了固定的寬度和高度。然后，我們在其中放置了一個目標 div，它具有絕對定位并居中顯示。目標 div 的背景色為灰色。接下來，我們添加了一個隱藏 div，并給它添加了一個類名“hidden”。在 CSS 樣式中，我們設置了這個隱藏 div 的 display 屬性為 none，這樣它在一開始就被隱藏起來了。
接下來，我們使用 CSS 的 :hover 偽類選擇器來通過鼠標懸停事件來改變隱藏 div 的 display 屬性。當鼠標移動到容器 div 上時，.container:hover .hidden 選擇器將匹配隱藏 div，并將其 display 屬性設置為 block，從而顯示它。當鼠標離開時，隱藏 div 又會被隱藏起來。
這只是一個簡單的例子，展示了如何使用 CSS 實現在移動到某個 div 上時顯示或隱藏其他 div。實際上，您可以根據自己的需求和創意來設計和定制此效果。您可以改變容器 div 和目標 div 的樣式、添加過渡效果以及在隱藏 div 中添加更多內容。
下面讓我們來看一個更復雜一點的例子。

<p>下面是一個更復雜的示例，帶有過渡效果</p>
<pre>
<style>
.container {
width: 200px;
height: 200px;
background-color: #f0f0f0;
position: relative;
}
<br>
   .target {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
<br>
   .hidden {
opacity: 0;
transition: opacity 0.3s ease;
}
<br>
   .container:hover .target {
transform: translate(-50%, -50%) scale(1.2);
}
<br>
   .container:hover .hidden {
opacity: 1;
}
</style>
<br>
<div class="container">
<div class="target">移動到這里</div>
<div class="hidden">顯示這個，帶有過渡效果</div>
</div>

在這個例子中，我們添加了一些過渡效果來使動畫更加平滑和流暢。我們給目標 div 添加了一個過渡屬性 transition，使其在大小變化時具有0.3秒的過渡時間和緩動效果。我們還將隱藏 div 的透明度設置為0，并給它添加了一個過渡屬性 transition，當透明度發生變化時，具有0.3秒的過渡時間和緩動效果。
通過這些過渡效果，當鼠標移動到容器 div 上時，目標 div 將放大 20%，同時隱藏 div 的透明度從0變為1，產生一個平滑的過渡效果。當鼠標離開容器 div 時，目標 div 返回原始大小，隱藏 div 的透明度再次變為0，同時也會有過渡效果。
以上是關于如何使用 CSS 實現在移動到某個 div 上時顯示或隱藏其他 div 的詳細解釋和示例。希望這些示例能夠幫助您理解和應用此效果，并為您的網頁設計增添一些互動和創意。記住，您可以根據自己的需求和創意進行修改和定制，創造出更多有趣和實用的效果。