CSS pointer-events
CSS is all about presentation. Discover how CSS pointer-events works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute determines if an element exhibits a response when a pointer event is activated on it. These events can be triggered by various input methods such as touch, stylus, mouse click, and others.
The pointer-events property manages the behavior of HTML elements in relation to various events like CSS active/hover states, mouse/touch events, and JavaScript click/tap events. It also determines the visibility of the cursor.
The none setting for this attribute is employed to disable the clickable area, enabling elements to interact with the content below them.
Syntax
pointer-events: none | auto |initial | inherit;
Even though this attribute offers eleven potential values, the values specified in the preceding syntax are the appropriate ones for HTML elements; the remaining values are set aside for implementation with SVG.
Property Values
This value signifies that an element is unresponsive to pointer events, disregarding all states, clicks, and cursor options associated with the designated HTML element.
auto: This is the initial value that signifies an element's responsiveness to pointer interactions like clicking and hovering.
Let's gain insight into these values through the use of illustrative examples.
Example - Using none value
In this instance, we are utilizing the "none" value which excludes the targeting of pointer-events.
<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size: 20px;
pointer-events: none;
}
</style>
</head>
<body>
<CENTER>
<h1> Welcome to the C# Tutorial </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href=""> C# Tutorial </a>
</p>
</body>
</html>
Output
Example - Using auto value
Here, we are utilizing the auto setting of the pointer-events property, which responds to the pointer events.
<!DOCTYPE html>
<html>
<head>
<title>
pointer-events Property
</title>
<style>
body {
text-align:center;
}
p{
font-size: 20px;
pointer-events: auto;
}
</style>
</head>
<body>
<CENTER>
<h1> Welcome to the C# Tutorial </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href=""> C# Tutorial </a>
</p>
</body>
</html>
Output
