Uma duvida, como eu alteraria a imagem junto com o fundo ao fazer um .hover nesse projeto?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Uma duvida, como eu alteraria a imagem junto com o fundo ao fazer um .hover nesse projeto?
Oi, Guilherme, tudo bem?
Para alterar a imagem com o fundo ao fazer um .hover, você pode usar a propriedade background-image no CSS. Por exemplo, suponha que você tem um botão com a classe .meu-botao e deseja alterar a imagem de fundo quando o usuário passa o mouse sobre ele.
<button class="meu-botao">Clique aqui</button>
.meu-botao {
background-color: #fff; /* Cor de fundo inicial */
background-image: url('imagem-inicial.jpg'); /* Imagem de fundo inicial */
background-size: cover; /* Ajusta a imagem ao tamanho do botão */
border: none;
padding: 10px 20px;
cursor: pointer;
}
.meu-botao:hover {
background-color: #272727; /* Cor de fundo ao passar o mouse */
background-image: url('imagem-hover.jpg'); /* Imagem de fundo ao passar o mouse */
}
Neste exemplo, ao passarmos o mouse sobre o botão, tanto a cor de fundo quanto a imagem de fundo são alteradas. Isso acontece, pois a classemeu-botao define o estilo inicial do botão, incluindo a imagem de fundo (imagem-inicial.jpg), enquanto a mesma classe, porém com o uso da pseudoclasse hover (meu-botao:hover) define as alterações que ocorrem quando o mouse está sobre o botão, incluindo a nova imagem de fundo (imagem-hover.jpg) e a nova cor de fundo.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!