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 make an area unclickable with CSS?
In this article, to make a given area unclickable we will use the CSS property pointer-events by assigning it to none value to get the required area unclickable.
Pointer events is a contemporary way to handle input from a spread of inform devices, like a mouse, a pen/stylus, a touchscreen, and so on.
The pointer-events CSS property sets beneath what circumstances (if any) a specific graphic component will become the target of pointer events. This property is employed to specify whether or not component shows pointer events and whether or not shows on the pointer.
Syntax
In CSS, we use the following syntax of the pointer-event used a CSS property −
pointer-events: auto; pointer-events: none;
Parameters
Auto − The element behaves as it would if the pointer-events property were not specified. In SVG content, this value and the value visiblePainted have the same effect.
None − The element is never the target of pointer events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Note − By default, the set value of pointer-event is ‘auto’.
We have provided the solution in the following approach −
- By Using pointer-events property.
Let’s see the program along with its output one by one.
Approach: By Using pointer-events property Of CSS
In this approach, we will be making a given image unclickable, the whole area covered by the given image will be unclickable using the CSS property pointer-event with the href attribute along with it we are using the pointer-events CSS property which sets whether the element in the page has to respond or not while clicking on elements along with the href within a class to maker the image unclickable within the <a> tag. For the image, we use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Add the image's URL to the src attribute of the image tag. Add the height and width in addition to that.
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.
The inline CSS method has been used under this approach since the pointer event is a genetic CSS property that can be applied equally well to any CSS method since it is a genetic CSS property.
Note − The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.
Syntax
The following is the generic syntax to pointer-events CSS property where in parameter it takes property accordingly.
Pointer-events: none;
Example-1
In the following program, we have used the internal CSS by adding the style tag inside it we have created a class that has pointer-event to none with the properties of a simple circle to make the area covered by the circle unclickable along with the <a> tag and added a link to its href attribute in HTML programming language.
<!DOCTYPE html>
<html
<head>
<meta charset="utf-8">
<title>Disable a href Link using CSS</title>
</head>
<style>
.unclickable{
pointer-events: none;
height: 250px;
width: 250px;
background-color: blue;
border-radius: 50%;
display: inline-block;
}
</style>
<body>
<h3>The below area covered by the circle is unclickable:-</h3>
<a class="unclickable" href="tutorialspoint.html"></a>
</body>
</html>
Example-2
In the following program, we have used the inline CSS by adding the style attribute with the <a> tag followed by adding the pointer-event to none into it which will make the used image unclickable to any user in HTML programming language.
<!DOCTYPE html>
<html>
<head>
<title>HTML Image as link</title>
</head>
<body>
The following image is unclickable as a link:<br>
<a style=" pointer-events: none; "href="https://www.tutorialspoint.com/">
<img alt="Qries" src="https://www.tutorialspoint.com/cg/images/logo.png"
width=300" height="100">
</a>
</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
This article was focused on how to make an area that is unclickable with CSS by using the pointer-events property of the CSS specification.
15K+ Views
