CSS pointer-events Property

CSS pointer-events property is used to control mouse events such as ‘hover’, ‘click’, ‘drag’, etc. over HTML elements. For example, you can restrict a user to click on the download button if he is not logged in.

The pointer-events property accepts two values, auto and none. The auto is the default value which allows all mouse events.

The value none restricts all default pointer-events such as clicking, dragging, etc. See the example below:


  pointer-events: auto;
  pointer-events: none;

CSS Syntax

The pointer-events property has the following syntax:

pointer-events: auto|none|initial|inherit;

Property Values

The pointer-events property accepts the following values:

autoAllows all mouse events. This is the default value.
noneRestricts all default mouse events.
initialSets the pointer-events property to its default value(auto).
inheritInherits the pointer-events property from the parent element.

General Info

Default Valueauto
JavaScript Usageelement.style.pointerEvents = “none”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment