/    /  CSS pointer-events

CSS pointer-events

 

This property provides whether or not an element reacts(shows some action) to pointer events.

none: The property is used for deactivating the click target and allows the elements to target whatever is underneath that element.

 

CSS Syntax:

 

pointer-events: auto|none;

 

Property Values:

 

  • auto : The element reacts to pointer events(like :hover and click).
  • none : Does not react to pointer events
  • initial : Property to its default value.
  • inherit : Pproperty from its parent element.

 

Example – Using none value

 

      <!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 I2Tutorials  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.i2tutorials.com/"> I2Tutorials </a>
</p>
</body>
</html>

 

OUTPUT:

 

CSS pointer-events

 

Example – Using auto value

 

<!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 I2Tutorials  </h1>
<h2> pointer-events:auto; </h2>
<p>
<a href="https://www.i2tutorials.com/"> I2Tutorials </a>
</p>
</body>
</html>

 

OUTPUT:

 

CSS pointer-events