Clique na DIV para os elementos subjacentes - CSS

Clique na DIV para os elementos subjacentes - CSS
Os desenvolvedores podem utilizar outros vários elementos sob um contêiner div. Suponha que você queira clicar em quaisquer itens subjacentes que sejam acessíveis através da div. A maioria dos desenvolvedores terá problemas graves porque só podem clicar em itens subjacentes se clicarem no lado externo para a sobreposição na div. Para lidar com essa situação, opte pela opção de clicar na DIV criada.

Esta posta.

Como clicar no DIV para elementos subjacentes no CSS?

Para clicar em uma div para elementos subjacentes no CSS, primeiro, crie uma div principal com um nome específico e adicione um “”Elemento para definir o hiperlink, que é utilizado para vincular de uma página a outra. Em seguida, insira uma tag "" seguindo o mesmo procedimento e especifique um nome de classe.

Etapa 1: Crie um contêiner div

Primeiro, utilize o “”Elemento para criar um contêiner“ div ”em um arquivo html. Então, especifique um “eu ia”Dentro da etiqueta de abertura“ div ”com um valor específico.

Etapa 2: Crie um contêiner Div aninhado

Em seguida, faça outro recipiente de div no primeiro contêiner seguindo o mesmo procedimento.

Etapa 3: Insira o cabeçalho

Depois disso, utilize a tag html para adicionar um título. Nesse cenário, o “

”A tag de título é usada.

Etapa 4: adicione um elemento para elementos subjacentes

Agora, insira um “”Elemento para vincular uma página a outra. Para fazer isso, adicione o “Href”Atributo dentro da tag“ ”e defina o valor deste atributo para atribuir o link do site:



Clique no link


= "https: // linuxhint.com "> não responsivo



= "https: // linuxhint.com "> Responsivo

Saída

Etapa 5: estilo Div principal contêiner

Acesse a div principal com a ajuda do seletor de atributos e nome como “.conteúdo principal”:

#conteúdo principal
margem: 30px 50px;
Fronteira: 3px verde pontilhado;
preenchimento: 20px 40px;
Background-Color: RGB (207, 250, 207);

Agora, aplique as propriedades CSS acima:

  • ““margem”É usado para especificar o espaço ao redor do limite do elemento.
  • ““fronteira”Determina a borda fora do elemento definido.
  • ““preenchimento”Aloca o espaço dentro do limite definido.
  • ““cor de fundo”Implantado para definir a cor na parte traseira do elemento.

Como resultado, o contêiner principal será estilizado da seguinte maneira:

Etapa 6: Aplicar a propriedade "Ponte-Events"

Agora, acesse o recipiente aninhado usando o nome da classe como “.raiz”:

.raiz
Ponteiro-eventos: nenhum;

Então, aplique o “Ponteiro-eventos”Para gerenciar os componentes HTML que reagem ao mouse e tocam eventos. Nesse cenário, o valor de “Ponteiro-eventos"É definido como"nenhum”, O que significa que o elemento não reage aos eventos de ponteiro:

Etapa 7: Acesse a classe infantil

Agora, acesse o “”Tag com o nome da classe como“.criança”. Então, aplique o “Ponteiro-eventos”Propriedade e defina o valor como“auto”:

.criança
Ponteiro-eventos: Auto;

O "auto”O valor é utilizado para reagir a eventos de ponteiro, como clique.

Saída

Trata -se de clicar na div até os elementos subjacentes no CSS.

Conclusão

Para clicar no DIV para os elementos subjacentes, primeiro, faça uma div principal com um nome específico e adicione um atributo de classe ou identificação. Então, insira o “”Elemento e adicione o atributo de classe quando criança. Depois disso, acesse a div e aplique o “Ponteiro-eventos”Com o valor nenhum. Em seguida, acesse o atributo filho e aplique “Ponteiro-eventos"Com o valor"auto”. Esta redação demonstrou o método para clicar na div até os elementos subjacentes.