<style> .disabled { pointer-events: none; opacity: 0.5; } </style>

CSS 禁用<div> 是控制元素不可操作或不可見的一種技術。通過設置特定的 CSS 屬性，我們可以禁用<div>元素的交互功能，同時改變其外觀以表明其禁用狀態。下面將介紹幾個案例，詳細說明如何使用 CSS 來禁用<div>。

1. 禁用點擊事件

要禁用<div>元素的點擊事件，我們可以使用 CSS 的 pointer-events 屬性。將該屬性設置為 none 將會阻止<div>元素接收鼠標或觸摸事件。

<code>
.disabled {
pointer-events: none;
}
</code>

在上述代碼中，我們創建了一個名為.disabled的樣式類，通過將其應用于<div>元素，該元素將會禁用點擊事件。

2. 禁用鼠標滾動

有時我們希望禁用<div>元素的鼠標滾動功能。為了實現這一目的，我們可以使用 CSS 的 overflow 屬性。將該屬性設置為 hidden 將會隱藏<div>內容之外的滾動條，并禁用鼠標滾動。

<code>
.disabled {
overflow: hidden;
}
</code>

通過將以上樣式類應用于<div>元素，該元素的鼠標滾動功能將被禁用，用戶將無法滾動查看<div>內的內容。

3. 禁用元素的交互

有時我們需要禁用<div>元素的所有交互，包括點擊、輸入和滾動等。為了實現這一目的，我們可以使用 pointer-events 和 opacity 屬性。

<code>
.disabled {
pointer-events: none;
opacity: 0.5;
}
</code>

以上代碼中，我們將 pointer-events 屬性設置為 none，這將禁用<div>元素的交互功能。同時，我們將 opacity 屬性設置為 0.5，使<div>元素半透明，以表明其禁用狀態。

通過以上案例，我們可以看到 CSS 是如何幫助我們禁用<div>元素的交互功能或外觀的。通過使用指定的屬性和樣式類，我們可以根據需求靈活地控制<div>的禁用效果，以提供更好的用戶體驗。