CSS não pairam
Exemplo # 01:
Vamos dar uma olhada em alguns dos elementos do HTML aplicando a propriedade Not Hover. Iniciamos o primeiro exemplo da tag HTML básica que é uma obrigação em qualquer código HTML, porque sem ele nosso código não funcionará de qualquer maneira. Após a tag html, há uma etiqueta de cabeça e a etiqueta corporal. Dentro da etiqueta corporal da nossa página HTML, usamos um título de tamanho 1 ou o maior título de páginas da web html. Após esse título, estamos usando uma tag div para criar uma nova seção em nossa página da web.
Esta tag foi especificada como pai usando o estilo de classe. Dentro desta tag Div principal, usamos as cinco tags infantis. Todas as cinco tags infantis são especificadas como "criança" usando o atributo de classe. Além disso, todas as seções infantis contêm numeração diferente de acordo com sua ocorrência. A tag "div" principal e a etiqueta corporal estão fechadas. Aqui vem a tag de título que foi usada para dar um nome a esta página da web. A etiqueta de estilo foi iniciada com o uso da especificação da classe “pai” para estilizar a seção Div “pai” desta página da web.
A propriedade Display do CSS foi usada para a seção DIV pai para exibi-la na posição em linha-flexível. A cor do fundo foi definida e a borda desse fundo foi definida como 1 pixel sólida com cor branca. Embora a largura da seção “div” dos pais fosse de 500 pixels e a altura seria de 120 pixels. A mesma tela foi usada para seções infantis e o plano de fundo foi definido para uma cor diferente. Além disso, a fronteira de 5 pixels de cor verde sólida foi definida para seções infantis. A largura e a altura das seções infantis foram definidas como 100 pixels cada. As seções infantis contêm estilo extra em comparação com a seção dos pais. A propriedade de transição foi definida como 0.5 segundos junto com a família de fontes. O peso da fonte foi definido como negrito e o tamanho da fonte seria 100 pixels para as seções infantis. É hora de usar a propriedade Not Hover for Child seções com uma opacidade de 0.5. Este código HTML foi concluído e nós o executaremos no navegador Chrome para ver como a propriedade Not Hover funciona.
A saída para este código HTML foi dada abaixo. Isso mostra que a seção pai também contém 5 seções infantis, mas o uso de propriedades não pairar para as sessões infantis não deixa sua cor mudar.
Exemplo # 02:
Vamos dar outro exemplo de html para ver o funcionamento de não perigo em diferentes elementos. Vamos iniciar esta ilustração com o mesmo html e tag de cabeça contendo a tag de título. Vamos dar uma olhada no corpo desta página HTML primeiro. Dentro da etiqueta corporal, usamos um título do maior tamanho em HTML. Usamos a tag Div para criar uma nova seção em nossa página da Web HTML. Esta seção div estaria contendo algumas tags de ancoragem para URLs e algumas listas. Usamos a primeira tag de âncora na palavra da casa na seção principal “div” que está nos redirecionando para a página atualmente aberta. Iniciamos uma lista não ordenada contendo um único item de lista. Este item de lista única contém uma etiqueta de âncora junto com a lista não ordenada de um total de 3 itens da lista. Esses itens da lista também se refeririam a alguns sites de mídia social usando os três itens de lista de tags de ancoragem na lista "Li" tags de html. Todas essas três tags de ancoragem foram classificadas quando criança. A lista não ordenada dos itens de lista única foi fechada junto com o fechamento da lista não ordenada externa.
Agora, estaremos olhando para a etiqueta de estilo. A cor de fundo para toda a seção div foi especificada como verde claro. As tags de ancoragem desta seção não têm decoração de texto, mas a cor seria branca e o tamanho da fonte seria 25 pixels com um preenchimento de 15px. O estilo de exibição seria bloqueio em linha. A principal lista não ordenada foi especificada com a tela em linha, 0 margens e 0.Preenchimento de 5 pixels. Uma única lista dentro de uma lista ordenada será exibida em um formato de bloco embutido.
A propriedade Hover foi usada para esta lista alterar sua cor para cinza após pairando. Após aplicar a propriedade Hover, a lista não ordenada dentro dela será exibida como um bloco em linha. A posição foi definida como absoluta. A largura foi definida como 200 pixels e a exibição foi definida como nenhuma para a lista não ordenada na lista ordenada única. Para a lista ordenada dentro da lista não ordenada, especificamos a cor do plano de fundo e exibi -la como um bloco. A tela do bloco para uma âncora seria mais importante para obter a prioridade.
As três listas também usam a propriedade Hover com fundo azul. Qualquer elemento que tenha sido classificado como criança estaria usando a propriedade Not Hover com a opacidade de 0.3 e cor vermelha.
Quando executamos este código, ele exibe a saída mostrada de abastecimento com as listas de menus de redes domésticas e sociais.
Quando passamos o mouse nas "redes sociais", ficou mais proeminente e a lista ordenada seria exibida.
Ao pairar sobre o item da lista ordenada, o plano de fundo foi alterado para azul por um tempo com o texto branco. O uso de não: a propriedade do hover não muda a cor do texto.
Conclusão
Este artigo foi sobre o uso de não: Propriedade de CSS em alguns elementos HTML de uma página da Web. Discutimos dois exemplos simples e únicos para demonstrá -los no código do Visual Studio. No primeiro exemplo, tentamos usá -lo no elemento "div" do HTML e, no segundo exemplo, ele foi usado nas listas não ordenadas e ordenadas de HTML. Ambos os exemplos são bem diferentes um do outro, mas cobrem o mesmo conceito para ambos.