CSS pointer-events Property

This property is used to specify whether an element show pointer events and whether or not show on the pointer.

Syntax:

pointer-events: auto|none;

Default Value: auto

Property values:

auto: This property is used to specify that an element must react to pointer events.
none: This property is used to specify that an element does not react to pointer events.

Example: In this example, we are using pointer-events: auto; property.

HTML

<!DOCTYPE html>

<html>
 
<head>

    <title>

        CSS | pointer-events Property

    </title>

    <style>

        p.geeks {

            pointer-events: auto;

        }

        h1,

        h2 {

            color: green;

        }

        body {

            text-align: center;

        }

    </style>

</head>
 
<body>

    <CENTER>

        <h1>GeeksForGeeks</h1>

        <h2>pointer-events:auto;</h2>

        <p class="geeks">

            <a href="#">GeeksforGeeks </a>

        </p>

    </CENTER>

</body>
 
</html>

Output:

Example: In this example, we are using pointer-events: none; property.

html

<!DOCTYPE html>

<html>

<head>

    <title>

        CSS | pointer-events Property

    </title>

    <style>

        p.geeks {

            pointer-events: none;

        }
 
        h1,

        h2 {

            color: green;

        }
 
        body {

            text-align: center;

        }

    </style>

</head>
 
<body>

    <h1>GeeksForGeeks</h1>

    <h2>pointer-events:none;</h2>

    <p class="geeks">

        <a href="#">GeeksforGeeks</a>

    </p>

</body>

</html>