CSS div 展開是指當鼠標懸停或點擊時，將指定的 div 元素展開或收起，使其內容在頁面上顯示或隱藏。這可以是一個有用的功能，特別是當網頁上有大量內容需要顯示在有限的空間內時。通過使用 CSS 和一些簡單的代碼，我們可以實現這個效果。以下是幾個代碼案例，用于詳細解釋和說明這一概念。

案例 1: 使用 hover 偽類實現div展開

我們可以使用 CSS 中的 :hover 偽類來實現當鼠標懸停在 div 元素上時展開它的內容。下面是一個示例代碼：

<style>
.expandable {
width: 200px;
height: 200px;
overflow: hidden;
transition: height 0.5s;
}
<br>
    .expandable:hover {
height: 400px;
}
</style>
<br>
<div class="expandable">
<p>當你懸停在這個div上時，我將展開！</p>
</div>

上述代碼中，.expandable 類將 div 元素的寬度和高度設為 200 像素，并隱藏溢出內容。當鼠標懸停在這個 div 上時，使用 :hover 偽類選擇器，將 div 的高度過渡為 400 像素，從而展開其內容。

案例 2: 使用 JavaScript 切換 div 的展開與收起

如果我們希望在點擊某個元素時展開或收起 div 的內容，我們可以使用 JavaScript 控制 div 元素的展開與收起狀態。以下是一個演示代碼：

<style>
.expandable {
width: 200px;
height: 200px;
overflow: hidden;
transition: height 0.5s;
}
<br>
    .expanded {
height: 400px !important;
}
</style>
<br>
<script>
function toggleExpand() {
var expandableDiv = document.getElementById("expandableDiv");
expandableDiv.classList.toggle("expanded");
}
</script>
<br>
<div class="expandable" id="expandableDiv">
<p>點擊下面的按鈕來展開或收起這個div的內容！</p>
</div>
<br>
<button onclick="toggleExpand()">展開/收起</button>

在上述代碼中，我們創建了一個函數 toggleExpand() 來切換 div 元素的展開與收起狀態。通過使用 classList.toggle() 方法，我們將 .expanded 類與 div 元素進行切換。通過設置 .expanded 類的高度為 400 像素，我們展開 div 的內容。通過點擊按鈕，我們可以激活 toggleExpand() 函數，實現展開和收起 div 的效果。

通過這些簡單的代碼案例，我們可以實現 CSS div 的展開效果。無論是使用 hover 偽類還是 JavaScript 控制，我們都能夠為網頁添加動態的交互效果，提高用戶體驗。