O objetivo deste manual é explorar como alterar uma imagem ao passar o mouse usando CSS. Então, vamos começar!
O que é :hover em CSS?
O :hover é um elemento de pseudo-classe usado para alterar o estado dos elementos HTML quando um mouse o aciona. Este seletor CSS é utilizado principalmente para estilizar ou selecionar elementos. No entanto, não pode ser aplicado a links.
Sintaxe
A sintaxe de :hover é fornecida abaixo:
elemento : flutuar {
Código CSS. . .
}
Aqui, ' elemento ” refere-se ao elemento no qual você deseja aplicar o efeito de foco.
Agora, vamos passar para o exemplo prático de alterar a imagem ao passar o mouse usando CSS.
Exemplo: Como alterar a imagem ao passar o mouse usando CSS?
Para alterar a imagem ao passar o mouse primeiro, adicione duas imagens na seção HTML. A primeira imagem é para o estado ativo e a próxima é para o estado de foco.
Etapa 1: adicionar imagens
Para o propósito especificado, adicionaremos duas imagens, “ imagem1 ' e ' imagem2 ”, e atribua o nome da classe à segunda imagem como “ hover_img ”.
HTML
< corpo >< div classe = 'img' >
< imagem src = 'imagem1.png' >
< imagem src = 'imagem2.png' classe = 'hover_img' >
< / div >
< / corpo >
Etapa 2: estilizar imagens
Agora, vá para o CSS para definir a posição de ambas as imagens usando “ posição ' propriedade. Vamos definir sua posição como “ absoluto ” para posicioná-lo absolutamente com referência ao seu pai mais próximo.
CSS
.img {posição : absoluto ;
}
Isso mostrará o seguinte resultado:
Na próxima etapa, vamos definir a segunda imagem na frente da primeira. Para isso, vamos definir a posição da imagem como “ absoluto ” e defina a posição superior e esquerda como “ 0 ”. O uso desta imagem é colocado na frente da primeira imagem, mas queremos exibir a segunda imagem quando o mouse passar sobre ela. Portanto, definindo o valor de exibição como “ Nenhum ” mostrará o resultado desejado:
.hover_img {posição : absoluto ;
topo : 0 ;
deixei : 0 ;
exibição : Nenhum ;
}
A saída do código fornecido é a seguinte:
A segunda imagem foi ocultada com sucesso atrás da primeira imagem.
Agora, vá para a próxima etapa.
Etapa 3: alterar a imagem ao passar o mouse
Em seguida, use “ :flutuar ” e selecione “ .img ” para aplicar o foco ao elemento selecionado. Em seguida, atribua o nome da classe da segunda imagem “ .hover_img ”. Depois disso, dentro dos parênteses, defina o valor da propriedade display como “ em linha ” que forçará o elemento a caber na mesma linha:
.img : flutuar .hover_img {exibição : em linha ;
}
Aqui está o resultado que demonstra que a imagem é alterada quando o usuário passa o mouse sobre ela:
A saída acima indica que alteramos com sucesso a imagem ao passar o mouse usando CSS.
Conclusão
A imagem pode ser alterada ao passar o mouse usando o botão “ :flutuar ” elemento de pseudo-classe. Para fazer isso, adicione as imagens necessárias no arquivo HTML, coloque-as na mesma posição usando CSS e aplique o seletor :hover nelas. Como resultado, a primeira imagem mudará quando passar o mouse sobre ela. Neste artigo, explicamos como alterar uma imagem ao passar o mouse usando o :hover com um exemplo prático.