- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS pointer-events Property
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..
- Related Articles
- Controlling Whether Mouse & Touch Allowed with CSS pointer-events Property
- Touchmove pointer-events: none CSS does not work on Chrome for Android 4.4 / ChromeView
- Double Pointer (Pointer to Pointer) in C
- CSS padding property
- CSS outline property
- CSS height property
- CSS width property
- CSS order property
- CSS all Property
- CSS quotes Property
- CSS pitch property
- Orphans CSS Property
- CSS azimuth Property
- CSS stress property
- CSS background property

Advertisements