The pointer-events property specifies if the element should do some action or not when the pointer event is triggered upon it. Pointer events can be triggered by mouse click, touch, stylus, etc.
Following is the code showing pointer-events property in CSS −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.pointer1 {
font-size: 20px;
padding: 10px;
pointer-events: none;
}
.pointer2 {
font-size: 20px;
padding: 10px;
pointer-events: auto;
}
</style>
</head>
<body>
<h1>Pointer-events property example</h1>
<div class="pointer1">
Go to <a href="https://www.wikipedia.org">wikipedia.org</a>
</div>
<div class="pointer2">
Go to <a href="https://www.google.com/">google.com</a>
</div>
<h2>Hover over the above links to see pointer events</h2>
</body>
</html>Output
The above code will produce the following output −
On hovering over the second link, you can see the mouse pointer since we have set pointerevents property..