資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 CSS 中停用 a href 連結？
為了在 CSS 中停用 a href 連結，我們可以使用多種方法，保持連結可見但阻止使用者互動。我們將瞭解三種不同的方法來在 CSS 中停用 a href 連結。
在這篇文章中，我們有一個連結為“點選此處”，我們的任務是在 CSS 中停用 href 連結。
在 CSS 中停用 a href 連結的方法
以下是在 CSS 中停用 a href 連結的方法列表，我們將在本文中逐步驟解釋並提供完整的示例程式碼。
使用 pointer-events 停用 href 連結
為了在 CSS 中停用 a href 連結，我們使用了 CSS pointer-events 屬性。它控制元素如何響應指標事件，例如滑鼠點選、滑鼠懸停和滑鼠移動。
- 我們使用 HTML 錨 標籤建立了一個連結。
- 然後我們使用 **a** 作為元素型別 選擇器，它將連結 顏色 更改為綠色，並使用 **"pointer-events: none;"** 停用連結。我們還將 text-decoration 值設定為 none 以刪除連結的下劃線。
示例
這是一個完整的示例程式碼，實現了上面提到的步驟，以使用 **pointer-events** 屬性在 CSS 中停用 a href 連結。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a {
pointer-events: none;
text-decoration: none;
color: #04af2f;
}
</style>
</head>
<body>
<h3>
Disabling a href link in CSS
</h3>
<p>
In this example, we have used CSS
<strong>pointer-events</strong> property
to disable href link in CSS.
</p>
<a href="/css/index.htm">Click Here</a>
</body>
</html>
使用 z-index 停用 href 連結
在這種停用 CSS 中 a href 連結的方法中，我們使用了 CSS z-index 屬性，該屬性定義了定位元素的順序。順序較高的元素在順序較低的元素前面。
- 我們使用 **a** 作為元素型別選擇器，它選擇錨標記。
- 然後，我們使用 **"z-index: -1;"** 以及 **"position: relative;"** 來停用連結。
示例
這是一個完整的示例程式碼，實現了上面提到的步驟，以使用 **z-index** 屬性在 CSS 中停用 a href 連結。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a {
z-index: -1;
text-decoration: none;
color: #04af2f;
position: relative;
}
</style>
</head>
<body>
<h3>
Disabling a href link in CSS
</h3>
<p>
In this example, we have used CSS
<strong>z-index</strong> property
to disable href link in CSS.
</p>
<a href="/css/index.htm">Click Here</a>
</body>
</html>
透過疊加透明元素停用連結
在這種方法中，我們使用 div 元素在連結上疊加一個透明層來停用連結。
- 我們使用錨標記來建立連結，並使用一個 div 標記，我們將用它來疊加一個透明層。
- 然後我們使用 **overlay** 類，它在錨元素上建立一個不可見的層。CSS height 和 width 屬性確保覆蓋層覆蓋整個元素，並且相對於連結定位。
- 將 background-color 設定為透明，以便使用者可以看到連結，並使用 CSS top 和 left 屬性將其放置在左上角。
示例
這是一個完整的示例程式碼，實現了上面提到的步驟，以透過 **疊加透明層** 在 CSS 中停用 a href 連結。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a {
color: #04af2f;
text-decoration: none;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
}
</style>
</head>
<body>
<h3>
Disabling a href link in CSS
</h3>
<p>
In this example, we have used HTML
<strong>div</strong> to create a
transparent layer to disable href link
in CSS.
</p>
<a href="/css/index.htm">Click Here</a>
<div class="overlay"></div>
</body>
</html>
結論
在本文中，為了在 CSS 中停用 a href 連結，我們使用了三種不同的方法，它們是：使用 **pointer-events** 屬性、使用 **z-index** 屬性和 **疊加一個不可見的層**。在這三種方法中，**pointer-events** 屬性是在停用 a href 連結中最常用的方法。
更新於：2024-09-18
6K+ 次瀏覽
廣告