CSS pointer-events Property

CSS Web Development Front End Technology

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

Live Demo

<!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>