Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable a href link in CSS?
The href attribute specifies the URL of the page the link goes to and this attribute specifies the location (URL) of the external resource (most often a style sheet file).To disable a href link we need to use various attributes along with it.
Syntax
In HTML we use the following syntax to use href attribute.
<a href="URL">Text</a>
In this, we can also use the <link> tag instead of the <a> tag.
Multiple Approaches
We have provided the solution in different approaches.
- By Using pointer-events property.
- By Using Bootstarp disabled link property.
Let’s see the program along with its output one by one.
Approach-1: By Using pointer-events property
In this method, the href within a class is used to deactivate the link inside the a> tag, and the pointer-events CSS property is used to control whether or not the element on the page must respond when clicked.
A specific visual element's ability to become the target of pointer events is controlled by the pointer-events CSS property, which specifies whether or not they can.
We have used the colour and text-decoration properties in addition to the pointer-events property.
It should be noted that pointer-events are an experimental use of CSS for non-SVG elements. Due to numerous unresolved concerns, the functionality was originally intended for the CSS 3 UI draught specification but has now been moved to CSS 4.
Syntax
The following is the generic syntax to pointer-events CSS property where in parameter it take property accordingly.
Pointer-events: none;
Example
The following program we are using internal CSS, creating class inside the style tag along with the pointer-event property set to none to make the href link disable when used within the <a> tag by adding the same class to it to make the text added in the <a> tag disable in HTML programming language.
<!DOCTYPE html>
<html
<head>
<meta charset="utf-8">
<title>Disable a href Link using CSS</title>
</head>
<style>
.disable-link{
pointer-events: none;
text-decoration: none;
color: black;
}
</style>
<body>
<a class="disable-link" href="tutorialspoint.html">Link</a>
</body>
</html>
Approach-2: By Using Bootstrap disabled link property
In this method, the href link attribute is used in conjunction with the pre-defined bootstrap properties from class disabled to make the supplied link disabled.
To attempt to deactivate the link functionality of a> and this class while making it visually appear disabled, the.disabled class utilises pointer-events: none.
Example
In this program, we have used the .disabled class which is the inbuilt class of bootstrap with the <a> where we have used the href attribute with link to make the same link diable to any user in the HTML programming language.
<!DOCTYPE html>
<html>
<head>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs nav-justified">
<li class="disabled"> <a class="disabled" href="tutorialspoint.html">Link</a></li>
</ul>
</body>
</html>
Supported Browsers − The browsers supported by pointer-events Property are listed below −
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
In this article, we explored how to disable the href link in HTML using two different approaches.
4K+ Views
