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
Selected Reading
Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
The CSS pointer-events property controls whether an element responds to mouse events, touch events, and other pointer interactions. When set to none, the element becomes "click-through" and ignores all pointer events.
Syntax
selector {
pointer-events: auto | none;
}
Possible Values
| Value | Description |
|---|---|
auto |
Default value. Element responds to all pointer events normally |
none |
Element ignores all pointer events and becomes "click-through" |
Example 1: Disabling Link Clicks
The following example shows how to disable pointer events on links −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
}
.disabled-link {
pointer-events: none;
color: #ccc;
text-decoration: none;
margin: 10px;
display: inline-block;
}
.normal-link {
pointer-events: auto;
color: #007bff;
text-decoration: underline;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<a href="https://example.com" class="disabled-link">Disabled Link (No Click)</a>
<br>
<a href="https://example.com" class="normal-link">Active Link (Clickable)</a>
</div>
</body>
</html>
Two links are displayed: the first appears grayed out and cannot be clicked, while the second is blue, underlined, and fully clickable.
Example 2: Disabled Form Element
This example demonstrates disabling pointer events on a select dropdown −
<!DOCTYPE html>
<html>
<head>
<style>
.disabled-select {
pointer-events: none;
background-color: #f0f0f0;
color: #666;
margin: 20px;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<select class="disabled-select">
<option>Cannot interact with this dropdown</option>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
</body>
</html>
A select dropdown appears with a grayed-out appearance and cannot be opened or interacted with using the mouse or touch.
Conclusion
The pointer-events property is useful for creating disabled UI elements or overlay effects. Setting it to none makes elements completely unclickable, while auto restores normal interaction behavior.
Updated on: 2026-03-15T15:28:33+05:30
304 Views
Advertisements