資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 使某個區域不可點選？
要使用 CSS 使某個區域不可點選，我們可以使用各種 CSS 屬性，我們將在本文中瞭解這些屬性。我們將討論三種不同的方法來使用 CSS 使某個區域不可點選。
在這篇文章中，我們有一個矩形區域，我們的任務是使用 CSS 使該區域不可點選。
使區域不可點選的方法
以下列出了使用 CSS 使區域不可點選的方法，我們將在本文中逐步解釋並提供完整的示例程式碼。
使用 pointer-events 屬性使區域不可點選
要使用 CSS 使區域不可點選，我們使用了 CSS pointer-events 屬性。它控制元素如何響應指標事件，例如滑鼠點選、滑鼠懸停和滑鼠移動。
- 為了建立一個矩形區域，我們使用了 CSS height 和 width 屬性來設定矩形的尺寸，並且由於 錨 標籤是內聯元素，因此我們使用了 CSS display 屬性將其設定為塊級元素。
- 建立矩形區域後，我們設定了它的 背景顏色 和 邊框。
- 然後，我們使用了 **"pointer-events: none;"** 使該區域不可點選。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS **pointer-events** 屬性使區域不可點選。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.link {
pointer-events: none;
background-color: lightgray;
border: 1px solid #000;
width: 200px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<h3>
To Make an Area Unclickable with CSS
</h3>
<p>
In this example we have used CSS <strong>
pointer-events</strong> property to make
the area unclickable with CSS.
</p>
<a href="#" class="link"></a>
</body>
</html>
使用 z-index 屬性使區域不可點選
在這種使用 CSS 使區域不可點選的方法中，我們使用了 CSS z-index 屬性，它定義了定位元素的順序。順序較高的元素會顯示在順序較低的元素前面。
- 我們使用了與第一種方法相同的方法，使用 **link** 類建立了一個具有淺灰色背景的矩形區域。
- 我們使用了 **unclickable** 類，它使用 CSS position 屬性相對於矩形區域定位 div，並使用 CSS 屬性 top、left、right 和 bottom 確保 div 覆蓋整個矩形區域。
- 然後，我們使用了 **"z-index: 2;"**，它將透明 div 放置在矩形區域的前面，使其不可點選。
示例
這是一個完整的示例程式碼，它實現了上述步驟，使用 CSS **z-index** 屬性使區域不可點選。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.link {
position: relative;
background-color: lightgray;
width: 200px;
height: 200px;
display: block;
}
.unclickable {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background-color: transparent;
}
</style>
</head>
<body>
<h3>
To Make an Area Unclickable with CSS
</h3>
<p>
In this example we have used CSS <strong>
z-index</strong> property to make the area
unclickable with CSS.
</p>
<div class="unclickable"></div>
<a href="#" class="link"></a>
</body>
</html>
透過覆蓋透明 div 使區域不可點選
在這種方法中，我們使用了 **div** 元素在矩形區域上覆蓋一個透明層，以使該區域不可點選。
- 我們使用了與第一種方法相同的方法，使用 **link** 類建立了一個具有淺灰色背景的矩形區域。
- 然後，我們使用了 **overlay** 類，它在矩形區域上建立了一個透明層。CSS **height** 和 **width** 屬性確保覆蓋層覆蓋整個元素並相對於連結進行定位。
示例
這是一個完整的示例程式碼，它實現了上述步驟，透過 **覆蓋透明 div 層** 使用 CSS 使區域不可點選。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.link {
position: relative;
background-color: lightgray;
width: 200px;
height: 200px;
display: block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
}
</style>
</head>
<body>
<h3>
To Make an Area Unclickable with CSS
</h3>
<p>
In this example we have used a <strong>transparent
div</strong> to overlay on the clickable area making
the area unclickable.
</p>
<a href="#" class="link"></a>
<div class="overlay"></div>
</body>
</html>
結論
在本文中，為了使用 CSS 使區域不可點選，我們使用了三種不同的方法：使用 CSS **pointer-events** 屬性、使用 **z-index** 屬性以及使用 **覆蓋透明層**。
更新於： 2024年9月27日
17K+ 瀏覽量
廣告