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.Beginner {
            pointer-events: auto;
        }
         
        h1,
        h2 {
            color: green;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <CENTER>
        <h1>w3wiki</h1>
        <h2>pointer-events:auto;</h2>
        <p class="Beginner">
            <a href="#">w3wiki </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.Beginner {
            pointer-events: none;
        }
 
        h1,
        h2 {
            color: green;
        }
 
        body {
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h2>pointer-events:none;</h2>
    <p class="Beginner">
        <a href="#">w3wiki</a>
    </p>
</body>
</html>

Output:

Supported Browsers: The browsers supported by pointer-events Property are listed below:

Google Chrome 1.0
Edge 12.0
Internet Explorer 11.0
Firefox 1.5
Opera 9.0
Safari 4.0

Tags:

#CSS-Properties #Technical Scripter 2018 #Web technologies #CSS #Web Technologies

CSS perspective-origin Property

CSS quotes Property

CSS pointer-events Property

HTML

html

Contact Us