<div> 元素是 HTML 中的一個塊級元素，可以用于構建網頁內容的布局結構。除了可以設置元素的樣式，div 元素還可以設置光標的樣式，從而改變用戶在該區域內鼠標的形態。通過設置不同的光標樣式，可以提高用戶體驗，使用戶更加了解該區域的功能和交互方式。
下面是幾個代碼案例，用于詳細解釋和說明如何使用 div 元素來設置光標樣式。
案例一：

<style>
.custom-cursor {
cursor: pointer;
}
</style>
<br>
  <div class="custom-cursor">
<p>這是一個帶有自定義光標的 div 元素。</p>
</div>

在上述案例中，我們在 div 元素上應用了一個名為 "custom-cursor" 的類，并在樣式中將光標樣式設置為 "pointer"。這將使鼠標在該區域內變為手指形狀的光標，以表示該區域是可點擊的。通過這種方式，用戶可以很清楚地知道該區域的交互方式。
案例二：

<style>
.text-cursor {
cursor: text;
}
</style>
<br>
  <div class="text-cursor">
<p>這是一個帶有文本輸入樣式的 div 元素。</p>
</div>

在這個案例中，我們通過將光標樣式設置為 "text"，使鼠標在 div 元素內變為一個問號和豎線的形狀，以表示該區域可以用于文本輸入。這對于需要用戶在該區域內輸入文字或執行其他文本相關操作的情況非常有用。
案例三：

<style>
.disable-cursor {
cursor: not-allowed;
}
</style>
<br>
  <div class="disable-cursor">
<p>這是一個禁用光標的 div 元素。</p>
</div>

在這個案例中，我們將光標樣式設置為 "not-allowed"，使鼠標在 div 元素內變為一個圓圈和斜線的形狀，以表示該區域是禁用狀態。通過禁用光標樣式，我們可以防止用戶在該區域內進行任何交互操作，從而保護網頁內容或避免用戶執行不允許的操作。
通過以上幾個案例，我們可以看出通過設置 div 元素的光標樣式，我們可以改變用戶在該區域內鼠標的形態，從而提高用戶體驗和交互方式的可視化效果。根據實際需求，我們可以選擇不同的光標樣式來達到不同的目的。