Como usar a propriedade CSS Pointer-Events

Ao desenvolver um site, você pode restringir os espectadores de executar algumas ações (clique/mouse) em alguns elementos do site, como imagens ou hiperlinks. Pode haver várias razões; Por exemplo, você não deseja que o usuário clique no link porque é para melhorar a estrutura de vinculação interna do site ou para proteger o que está dentro do link. Em tais cenários, a propriedade CSS Pointer-Events pode ser utilizada para obter os resultados necessários.

Neste artigo, elaboraremos como usar a propriedade CSS Pointer-Events.

O que é a propriedade Pointer-Events?

CSS “Ponteiro-eventos”Propriedade especifica o comportamento do ponteiro/toque em relação ao elemento HTML e se o elemento selecionado responderá executando ações como o mouse ou clique.

Como usar a propriedade Pointer-Events?

No CSS, a propriedade Pointer-Events pode ser utilizada para ativar ou desativar as ações do ponteiro em alguns elementos HTML específicos. A sintaxe da propriedade Pointer-Events é dada abaixo.

Sintaxe

Ponteiro-eventos: Nenhum | auto;

Na sintaxe mencionada, “auto”É o valor padrão da propriedade Pointer-Events, e permite a ação do ponteiro em relação a um elemento e“nenhum”É totalmente oposto ao automóvel; Ele desativa a ação do ponteiro em elementos html.

Vamos seguir em frente e dar um exemplo para entender a propriedade Pointer-Events.

Exemplo 1
Em nosso arquivo html, especifique uma tag de âncora com o texto “Linuxhint.io”E coloque -o dentro da seção corporal.

Html

Linuxhint.io

Agora, usaremos o “Ponteiro-eventos”Propriedade e atribua valor a ele“nenhum”. Isso desativará a ação do ponteiro no elemento.

CSS

a
Ponteiro-eventos: nenhum;

Salve seu arquivo HTML com código mencionado e execute -o usando seu navegador:

Vamos dar outro exemplo para cobrir profundamente a propriedade Pointer-Events.

Exemplo 2
Defina o valor da propriedade Pointer-Events como “auto" desta vez. Isso fará com que o elemento responda sobre o ponteiro pairar ou clicar. No entanto, o Auto é o valor padrão da propriedade Pointer-Events.

CSS

a
Ponteiro-eventos: Auto;

Saída

Cobrimos diferentes usos da propriedade CSS Pointer-Events.

Conclusão

Para controlar as ações do ponteiro, podemos utilizar o CSS “Ponteiro-eventos" propriedade. O "auto”O valor é o valor predefinido desta propriedade; Permite as ações sobre os elementos HTML. Quando a propriedade Pointer-Events é usada com o valor “nenhum”, Ele desativa as ações em direção a um elemento específico. Este artigo demonstrou como usar a propriedade CSS Pointer-Events.