Neste artigo, detalharemos como usar a propriedade pointer-events do CSS.
O que é propriedade de eventos de ponteiro?
CSS “ eventos de ponteiro ” especifica o comportamento do ponteiro/toque em direção ao elemento HTML e se o elemento selecionado responderá executando ações como passar o mouse ou clicar.
Como usar a propriedade de eventos de ponteiro?
Em CSS, a propriedade pointer-events pode ser utilizada para habilitar ou desabilitar ações de ponteiro em alguns elementos HTML específicos. A sintaxe da propriedade pointer-events é fornecida abaixo.
Sintaxe
eventos de ponteiro : Nenhum | auto ;
Na sintaxe mencionada, “ auto ” é o valor padrão da propriedade pointer-events e habilita a ação do ponteiro em direção a um elemento, e “ Nenhum ” é totalmente oposto ao auto; 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 marca âncora com o texto “ LinuxHint.io ” e coloque-o dentro da seção do corpo.
HTML
< uma href = “https://www.linuxhint.io/” > LinuxHint.io < / uma >Agora vamos usar o “ eventos de ponteiro ” e atribua o valor “ Nenhum ”. Isso desativará a ação do ponteiro no elemento.
CSS
uma {eventos de ponteiro : Nenhum ;
}
Salve seu arquivo HTML com o 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 do mouse ou clique. No entanto, auto é o valor padrão da propriedade pointer-events.
CSS
uma {eventos de ponteiro : auto ;
}
Resultado
Cobrimos diferentes usos da propriedade pointer-events do CSS.
Conclusão
Para controlar as ações do ponteiro, podemos utilizar o CSS “ eventos de ponteiro ' propriedade. O ' auto ” valor é o valor predefinido desta propriedade; ele habilita as ações sobre os elementos HTML. Quando a propriedade pointer-events é usada com o valor “ Nenhum ”, desativa as ações em direção a um elemento específico. Este artigo demonstrou como usar a propriedade CSS pointer-events.