Sintassi

Significato dei valori principali:

• auto: il comportamento predefinito. L'elemento risponde normalmente agli eventi del mouse.

• none: l'elemento non risponde a nessun evento del mouse. Gli eventi passano "attraverso" l'elemento come se non fosse presente.

• painted: l'elemento risponde agli eventi solo se è visibile (ad esempio, non trasparente).

• visiblePainted: l'elemento risponde agli eventi solo se visibile, ma non se ha trasparenza o è nascosto.

• visibleFill: l'elemento risponde solo quando la parte visibile è riempita di colore (utile per forme SVG).

Esempio proprietà: pointer-events

Codice Esempio: pointer-events

CODE: CSS

1. .container {

2.   width: 300px;

3.   height: 200px;

4.   background-color: #f4f4f4;

5.   position: relative;

6.   border: 2px solid #333;

7. }

9. .clickable {

10.   position: absolute;

11.   top: 50px;

12.   left: 50px;

13.   width: 100px;

14.   height: 100px;

15.   background-color: #50a14f;

16.   color: white;

17.   text-align: center;

18.   line-height: 100px;

19.   pointer-events: none; /* Disabilita l'interazione del mouse */

20. }

22. .underneath {

23.   position: absolute;

24.   top: 70px;

25.   left: 70px;

26.   width: 100px;

27.   height: 100px;

28.   background-color: #ff6347;

29.   color: white;

30.   text-align: center;

31.   line-height: 100px;

32. }

Contenuto Esempio: pointer-events

  
  <style>
    .container {
      width: 300px;
      height: 200px;
      background-color: #f4f4f4;
      position: relative;
      border: 2px solid #333;
    }

    .clickable {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: #50a14f;
      color: white;
      text-align: center;
      line-height: 100px;
      pointer-events: none; /* Disabilita l'interazione del mouse */
    }

    .underneath {
      position: absolute;
      top: 70px;
      left: 70px;
      width: 100px;
      height: 100px;
      background-color: #ff6347;
      color: white;
      text-align: center;
      line-height: 100px;
    }
  </style>

  <div class="container">
    <div class="clickable">Non cliccabile</div>
    <div class="underneath">Cliccabile</div>
  </div>
  

Spiegazione:
Hai due elementi sovrapposti in una container di dimensioni 300px per 200px:

• Un rettangolo verde (con classe .clickable) che si trova nella parte superiore della container.
• Un rettangolo rosso (con classe .underneath) che si trova sotto il verde.

La proprietà CSS pointer-events controlla se un elemento può essere interagito dal mouse o da altri dispositivi di puntamento (come il touch screen). Se è impostata su none, l'elemento non risponderà a nessuna interazione del mouse, e quindi, gli eventi come i clic non verranno attivati su di esso.

Il comportamento dell'esempio:

• L'elemento con la classe .clickable (verde) ha la proprietà pointer-events: none;, che significa che non risponde a nessun clic o interazione del mouse. Non importa dove clicchi sopra il rettangolo verde, il mouse "passerà attraverso" e non verrà attivato da quell'elemento.
• L'elemento con la classe .underneath (rosso), invece, è cliccabile normalmente, poiché non ha pointer-events: none; e quindi risponde agli eventi del mouse.

Cosa succede quando interagisci con la pagina:

• Se provi a cliccare sull'elemento verde (quello con la classe .clickable), nulla succede, perché il mouse "passa attraverso" di esso.
• Se clicchi sull'elemento rosso (quello con la classe .underneath), il clic avrà effetto sull'elemento rosso, poiché quest'ultimo è interattivo.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser