<div>中的visibility屬性用于控制元素的可見性。該屬性接受兩個值：visible和hidden。當屬性值設置為visible時，元素將以正常的方式顯示在頁面上；當設置為hidden時，元素將被隱藏起來，但仍然占據其在文檔流中的空間。本文將通過幾個代碼案例詳細解釋和說明<div>中的visibility屬性的用法和效果。
，我們來看一個簡單的例子。假設我們有一個<div>元素，其內容為一個紅色的矩形，我們希望在鼠標懸停時隱藏它。我們可以通過鼠標事件和visibility屬性來實現這個效果。以下是相關的HTML和CSS代碼：

HTML:

<div id="box" onmouseover="hideBox()" onmouseout="showBox()"></div>

CSS:

#box {
width: 100px;
height: 100px;
background-color: red;
}
<br>
.hidden {
visibility: hidden;
}

在這個例子中，我們使用了兩個JavaScript函數hideBox()和showBox()，它們分別在鼠標懸停和鼠標離開時觸發。hideBox()函數將<div>元素的visibility屬性設置為hidden，使其隱藏起來。showBox()函數則將其設置為visible，使其再次可見。通過這種方式，我們可以實現在鼠標懸停時隱藏元素的效果。
另一個常見的用法是在動畫中使用visibility屬性。假設我們有一個<div>元素，內部包含一個旋轉的圖形，我們希望在點擊<div>元素時隱藏它。我們可以通過CSS動畫和visibility屬性來實現這個效果。以下是相關的HTML和CSS代碼：

HTML:

<div id="box" onclick="hideBox()"></div>

CSS:

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<br>
#box {
width: 100px;
height: 100px;
background-color: red;
animation: spin 2s linear infinite;
}
<br>
.hidden {
visibility: hidden;
}

在這個例子中，我們使用了CSS動畫@keyframes來定義一個旋轉的效果。然后，我們給<div>元素添加了一個點擊事件，當點擊時調用hideBox()函數，將其visibility屬性設置為hidden，從而隱藏它。通過這種方式，我們可以在點擊時隱藏旋轉的圖形。
起來，<div>中的visibility屬性可以幫助我們控制元素的可見性。我們可以通過設置visibility屬性為hidden來隱藏元素，并通過設置為visible使其重新可見。這在制作交互效果和動畫中非常有用。使用上述的代碼案例作為參考，我們可以根據具體需求來靈活運用該屬性，實現各種各樣的效果。