Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 make an area unclickable with CSS?
To make an area unclickable with CSS, we can use various CSS properties, which we will be understanding in this article. We will be discussing three different approaches to make an area unclickable with CSS.
In this article we are having a rectangular area, our task is to make an area unclickable with CSS.
Approaches to Make an Area Unclickable
Here is a list of approaches to make an area unclickable with CSS which we will be discussing in this article with stepwise explaination and complete example codes.
- Unclickable Area using pointer-events property
- Unclickable Area using z-index property
- Unclickable Area By Overlaying a Transparent div
Unclickable Area using pointer-events property
To make an area unclickable with CSS, we have used CSS pointer-events property. It control how an element responds to pointer events such as mouse clicks, mouseovers, and mouse movements.
- To create a rectangular area we have used CSS height and width property to set the dimension of rectangle and since anchor tag is an inline element, we have used CSS display property to make it a block element.
- After creating a rectangular area we have set it's background-color and border.
- Then we have used "pointer-events: none;" to make the area unclickable.
Example
Here is a complete example code implementing above mentioned steps to make an area unclickable using CSS pointer-events property.
<!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>
Unclickable Area using z-index property
In this approach to make an area unclickable with CSS, we have used CSS z-index property which defines order of positioned element. Element with higher order appears in front of element with lesser order.
- We have used same method as approach first to create a rectangular area with lightgray background using link class.
- We have used unclickable class which uses CSS position property to position the div relative to rectangular area and CSS properties top, left, right and bottom make sure that the div covers the entire rectangular area.
- Then we have used "z-index: 2;" which places the transparent div infront of rectangular area making it unclickable.
Example
Here is a complete example code implementing above mentioned steps to make an area unclickable using CSS z-index property.
<!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>
Unclickable Area By Overlaying a Transparent div
In this approach we have used div element to overlay a transparent layer on rectangular area to make the area unclickable.
- We have used same method as approach first to create a rectangular area with lightgray background using link class.
- Then we have used overlay class which creates a transparent layer on rectangular area. CSS height and width property ensures overlay covers whole element and is positioned relative to link.
Example
Here is a complete example code implementing above mentioned steps to make an area unclickable with CSS by overlaying transparent div layer.
<!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>
Conclusion
In this article, to make an area unclickable with CSS we have used three different approaches which are: by using CSS pointer-events property, by z-index property and by overlaying a transparent layer.
19K+ Views
