Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to disable a href link in CSS?
To disable a href link in CSS, we can use various approaches keeping the link visible but preventing user interaction. We will be understanding three different approaches to disable a href link in CSS.
In this article, we are having a link as 'Click Here', our task is to disable href link in CSS.
Syntax
/* Method 1: Using pointer-events */
a {
pointer-events: none;
}
/* Method 2: Using z-index */
a {
position: relative;
z-index: -1;
}
/* Method 3: Using overlay element */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Method 1: Using pointer-events Property
To disable a href link in CSS, we can use CSS pointer-events property. It controls how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.disabled-link {
pointer-events: none;
text-decoration: none;
color: #04af2f;
cursor: default;
}
.normal-link {
color: #007bff;
text-decoration: underline;
}
</style>
</head>
<body>
<h3>Disabling a href link in CSS</h3>
<p>Normal link: <a href="/css/index.htm" class="normal-link">Click Here</a></p>
<p>Disabled link: <a href="/css/index.htm" class="disabled-link">Click Here</a></p>
</body>
</html>
Two links are displayed. The first link is clickable and blue with underline. The second link appears green without underline and cannot be clicked.
Method 2: Using z-index Property
In this approach to disable a href link in CSS, we use CSS z-index property which defines the stacking order of positioned elements
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.disabled-link {
z-index: -1;
text-decoration: none;
color: #04af2f;
position: relative;
}
.container {
position: relative;
background-color: #f9f9f9;
padding: 20px;
}
</style>
</head>
<body>
<h3>Disabling a href link in CSS</h3>
<div class="container">
<p>This link is disabled using z-index: <a href="/css/index.htm" class="disabled-link">Click Here</a></p>
</div>
</body>
</html>
A green link appears inside a light gray container. The link is visible but cannot be clicked because it's positioned behind other elements.
Method 3: Using Overlay Element
In this approach we use a div element to overlay a transparent layer on the link to disable it
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.link-container {
position: relative;
display: inline-block;
}
.disabled-link {
color: #04af2f;
text-decoration: none;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: transparent;
cursor: not-allowed;
}
</style>
</head>
<body>
<h3>Disabling a href link in CSS</h3>
<p>Link with transparent overlay:</p>
<div class="link-container">
<a href="/css/index.htm" class="disabled-link">Click Here</a>
<div class="overlay"></div>
</div>
</body>
</html>
A green link appears with a "not-allowed" cursor when hovered. The link is visible but clicking is prevented by the transparent overlay.
Conclusion
To disable a href link in CSS, we can use three different approaches: pointer-events: none, z-index positioning, or overlaying a transparent element. The pointer-events property is the most commonly used and effective method.
7K+ Views
