O seletor de pairar faz parte da pseudo-classe. Este efeito é usado para estilizar o conteúdo no HTML quando o cursor do mouse paira sobre eles. Podemos aplicar esse efeito a qualquer elemento. Este artigo contém algum uso básico de uma aula de pairar em HTML e CSS.

Propósito do efeito pairar

Em qualquer documento ou navegador, usamos os links para sites para a assistência do usuário. Para esse fim, podemos estilizar os links para as páginas que ainda não foram visitadas usando a classe Seletor de link. Da mesma forma, para os links que já foram visitados, usamos o seletor visitado. Um seletor ativo é usado para os links ativos. Estes são todos os estilos de link que mostram os efeitos no mouse. Se o link e o seletor dos links que são visitados estiverem presentes na definição de CSS, usamos uma classe seletora de pairar para ver o efeito resultante.

Por outro lado, sempre que queremos pairar em qualquer elemento no HTML, isso causa alguns efeitos usando algumas propriedades no CSS, seja no conteúdo existente ou no novo formulário de elemento como resultado do pairar.

Sintaxe do elemento pairar

Content_of_html: hover
// declarar código ou efeitos CSS que você deseja aplicar.

Exemplo 1: Passe o mouse muda a cor do texto

Este exemplo lida com a transformação do texto quando movemos o cursor do mouse em direção a ele. Podemos aplicar as várias condições ao texto. Mas, por enquanto, as duas mudanças básicas a seguir são: a mudança na cor do texto em que o pau é aplicado e o destaque do texto com uma mudança na cor do fundo.

Começando com a seção da cabeça HTML, use a etiqueta de estilo nela enquanto estamos fazendo um estilo interno. Use a seção de estilo dentro da tag. Uma aula de pairar é usada para aplicar todos os efeitos no texto do cabeçalho. Então, o H1 é usado com a aula de pairar.

H1: Hover
Cor branca;
Background-Color: roxo;

As duas propriedades, como discutimos anteriormente, são aplicadas. Por padrão, a cor do cabeçalho é preta e a cor de fundo da página da web é branca. Mas, no mouse, a cor de fundo dessa porção especificada se torna roxa, de modo que a cor do texto também muda para o branco.

Código HTML CSS:

Feche a etiqueta de estilo e a seção principal do HTML. Movendo -se em direção à parte do corpo, um título1 é declarado. O alinhamento para o cabeçalho1

está definido para o centro. Feche todas as tags e salve o arquivo dos editores de texto. Para executar a saída, precisamos executar o arquivo no navegador. Ao salvar o arquivo, uma coisa deve ser lembrada: salve o arquivo com a extensão HTML em vez de salvá -lo com a extensão do texto. Abra com o navegador padrão para que você possa obter a saída.

Saída:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/video2.MP400: 0000: 0000: 10 Utilize as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

A saída no navegador é capturada na forma de um vídeo de alguns segundos que leva ao excesso de exibir os resultados. Na execução do arquivo, você verá que um simples título no centro da página da web aparece. Quando levamos o cursor para perto do cabeçalho ou pairam sobre o título, a cor do fundo e a cor da fonte é alterada. Sempre que o cursor é movido de volta, ele volta ao padrão.

Exemplo 2: O passe openda constrói um bloco com texto

Diferentemente do exemplo anterior em que o texto existente foi alterado no passeio, neste exemplo, um novo conteúdo (bloco) de HTML é adicionado que é mostrado apenas quando passamos pelo pau sobre o texto especificado. Este bloco também tem algumas dimensões e especificações. Vamos elaborar o procedimento.

Começando com a seção CSS, nós titamos um div. Esta div cria um bloco de conteúdo que é o resultado de pairando sobre o texto. A largura e a altura são os dois valores básicos aplicados para formar qualquer forma em HTML. Em seguida é a propriedade de preenchimento. É a área de distância do conteúdo dentro de um bloco ou forma. Por exemplo, tomamos um texto dentro do bloco, de modo que a distância do texto e o limite da forma são tomados como o preenchimento. Se apenas o preenchimento for usado, significa que é a distância dentro da caixa em todos os lados. Se o preenchimento for feito de um lado especificado, pois usamos o preenchimento da direita, significa que é a distância no lado direito. Esta propriedade mantém o texto dentro do limite do bloco. Caso contrário, há chances de exceder o texto da fronteira do bloco.

Preenchimento: 20px;
Right-right: 50px;

Esse efeito de preenchimento é aplicado para alinhar o conteúdo interno com o conteúdo externo. O valor é tomado em pixels.

Código CSS:

O tamanho da fonte e a cor da fonte do texto são aplicados ao texto dentro do bloco. A próxima seção de estilo é sobre o cabeçalho que aplicamos no passeio. À medida que o bloco de conteúdo é criado dentro da div, a div é incluída neste tipo de estilo juntos. O conteúdo da forma de bloco é criado que é mencionado para formar uma tela.

H3: Hover + div
Exibição: bloco;

Depois disso, feche o estilo e as tags da cabeça. Declare um título dentro do corpo HTML. Uma div é formada. O texto que será mencionado dentro do bloco também é escrito dentro das tags div. Feche a etiqueta corporal.

Código corporal HTML:

Salve o código no arquivo e execute -o no navegador. Como uma saída do código anterior, pegamos uma pequena parte do vídeo para elaborar o funcionamento da aula de pairar que é criada e projetada para criar um bloco com um texto dentro do bloco.

Saída:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/video3.MP400: 0000: 0000: 13 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

O vídeo mostra que um texto simples como título é exibido quando executamos o arquivo no navegador. Mas quando passamos pelo passar o texto, causa uma mudança na página da web. No mouse, o texto do cabeçalho permanece o mesmo que é no momento da execução. Mas um bloco no lado esquerdo da página é criado toda vez que movemos o cursor em direção ao cabeçalho. Quando afastamos o cursor do cabeçalho, o bloco desaparece. Isso ocorre porque a aula do hover cria um bloco e um texto dentro dela. Todos os efeitos no bloco e texto são aplicados no CSS.

Conclusão

O CSS Hover é uma propriedade usada para proeminente ou destacar o conteúdo HTML quando movemos o cursor em direção a eles. Esta função é usada principalmente para notificar sobre algo. Neste artigo, explicamos o funcionamento de uma aula de pairar e como o conteúdo HTML é transformado em ondulação. No início, demos uma breve visão geral da aula de pairar. Implementamos os dois exemplos básicos do efeito pairar. O primeiro exemplo contém o efeito no texto existente, enquanto o segundo exemplo é mostrar uma forma adicional pairando em direção ao texto existente, enquanto o texto existente permanece o mesmo.