CSS pointer-events Property

CSSWeb DevelopmentFront 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>

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

raja
Published on 07-May-2020 14:02:44
Advertisements