In questo articolo, elaboreremo come utilizzare la proprietà CSS pointer-events.
Che cos'è la proprietà pointer-events?
CSS “ eventi-puntatore ” specifica il comportamento del puntatore/tocco verso l'elemento HTML e se l'elemento selezionato risponderà eseguendo azioni come passare il mouse o fare clic.
Come utilizzare la proprietà pointer-events?
In CSS, la proprietà pointer-events può essere utilizzata per abilitare o disabilitare le azioni del puntatore su alcuni elementi HTML specifici. La sintassi della proprietà pointer-events è riportata di seguito.
Sintassi
eventi-puntatore : nessuno | auto ;
Nella sintassi menzionata, ' auto ” è il valore predefinito della proprietà pointer-events e abilita l'azione del puntatore verso un elemento, e “ nessuno ” è totalmente opposto all'auto; disabilita l'azione del puntatore sugli elementi HTML.
Andiamo avanti e facciamo un esempio per comprendere la proprietà pointer-events.
Esempio 1
Nel nostro file HTML, specifica un tag di ancoraggio con il testo ' LinuxHint.io ” e posizionarlo all'interno della sezione del corpo.
HTML
< un href = “https://www.linuxhint.io/” > LinuxHint.io < / un >Ora useremo il ' eventi-puntatore ” proprietà e assegnargli un valore “ nessuno ”. Ciò disabiliterà l'azione del puntatore sull'elemento.
CSS
un {eventi-puntatore : nessuno ;
}
Salva il tuo file HTML con il codice menzionato ed eseguilo usando il tuo browser:
Prendiamo un altro esempio per coprire in modo approfondito la proprietà pointer-events.
Esempio 2
Imposta il valore della proprietà pointer-events su ' auto ' questa volta. Farà in modo che l'elemento risponda al passaggio del puntatore o al clic. Tuttavia, auto è il valore predefinito della proprietà pointer-events.
CSS
un {eventi-puntatore : auto ;
}
Produzione
Abbiamo trattato diversi usi della proprietà CSS pointer-events.
Conclusione
Per controllare le azioni del puntatore, possiamo utilizzare il CSS ' eventi-puntatore ' proprietà. Il ' auto ” valore è il valore predefinito di questa proprietà; abilita le azioni sugli elementi HTML. Quando la proprietà pointer-events viene utilizzata con il valore ' nessuno ”, disabilita le azioni verso un elemento specifico. Questo articolo ha dimostrato come utilizzare la proprietà CSS pointer-events.