Propiedad CSS pointer-events

Ejemplo

Establece si el elemento responde a los eventos del ratón:

div.ex1 { pointer-events: none; } div.ex2 { pointer-events: auto; }

Pruébalo »

Definición y uso

La propiedad pointer-events se utiliza para establecer si el elemento reacciona a los eventos del ratón.

Valor predeterminado: none
Valor predeterminado: auto
Heredado: Ninguno
Animación: no. Leeranimatable
Versión: CSS3
Sintaxis de JavaScript: object.style.all="initial"      Pruébalo

Soporte del navegador

Los números en la tabla indican la versión mínima del navegador que admite esta propiedad.

Propiedad
pointer-events 2.0 11.0 3.6 4.0 9.0

Sintaxis CSS

pointer-events: auto|none;

Valores de la propiedad

Valores de la propiedad Descripción
auto Valor predeterminado; al establecer esta propiedad, el enlace se puede hacer clic y visitar con normalidad.
none El elemento no puede reaccionar a los eventos del ratón.
initial Establece la propiedad a su valor predeterminado,Ver másinitial
inherit Hereda la propiedad del elemento padre,Ver másinherit

Ejemplo

/* Valores de la propiedad */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* Solo se aplica a SVG */
pointer-events: visibleFill;    /* Solo se aplica a SVG */
pointer-events: visibleStroke;  /* Solo se aplica a SVG */
pointer-events: visible;        /* Solo se aplica a SVG */
pointer-events: painted;        /* Solo se aplica a SVG */
pointer-events: fill;           /* Solo se aplica a SVG */
pointer-events: stroke;         /* Solo se aplica a SVG */
pointer-events: all;            /* Solo se aplica a SVG */

/* Valores globales */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

visiblePainted

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón en las siguientes situaciones:

  • El valor de la propiedad visibility es visible, el puntero del ratón está dentro del elemento y la propiedad fill especifica un valor distinto de none.
  • El valor de la propiedad visibility es visible, el puntero del ratón está en el borde del elemento y la propiedad stroke especifica un valor distinto de none.

visibleFill

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el valor de la propiedad visibility es visible y el puntero del ratón está dentro del elemento; el valor de la propiedad fill no afecta el manejo de eventos.

visibleStroke

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el valor de la propiedad visibility es visible y el puntero del ratón está en el borde del elemento; el valor de la propiedad stroke no afecta el manejo de eventos.

visible

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el valor de la propiedad visibility es visible y el puntero del ratón está dentro del elemento o en su borde; los valores de las propiedades fill y stroke no afectan el manejo de eventos.

painted

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón en las siguientes situaciones:

  • El puntero del ratón está dentro del elemento y la propiedad fill especifica un valor distinto de none.
  • El puntero del ratón está en el borde del elemento y la propiedad stroke especifica un valor distinto de none.

El valor de la propiedad visibility no afecta el manejo de eventos.

fill

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el puntero del ratón está dentro del elemento; los valores de las propiedades fill y visibility no afectan el manejo de eventos.

stroke

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el puntero del ratón está en el borde del elemento; los valores de las propiedades stroke y visibility no afectan el manejo de eventos.

all

Solo se aplica a SVG. El elemento solo se convierte en el objetivo de los eventos del ratón cuando el puntero del ratón está dentro del elemento o en su borde; los valores de las propiedades fill, stroke y visibility no afectan el manejo de eventos.

Otras extensiones