Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property

CSSWeb DevelopmentFront End Technology

Using the CSS pointer-events property we can control whether a mouse and touch are allowed on an element.

The syntax of CSS pointer-events property is as follows −

pointer-events: auto|none;

Above,

auto is default. Element reacts to pointer events, whereas

none: Element does not react to pointer events

Example

The following examples illustrate CSS pointer-events property.

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
a {
   margin: 10vh;
   pointer-events: none;
}
a:last-of-type {
   pointer-events: auto;
}
</style>
</head>
<body>
<a href=#>No pointer event here</a>
<a href=#>Automatic pointer event here</a>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
select {
   margin: 10vh;
   pointer-events: none;
   background-color: mistyrose;
}
</style>
</head>
<body>
<select>
<option>No event here </option>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</body>
</html>

Output

This will produce the following result −

raja
Published on 12-Mar-2021 11:05:56
Advertisements