Entrar Ainda não tem acesso?
1
resposta

[Dúvida] como aplicar o hover em svg

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Pseudo-classes e combinadores

por jonas alex de jesus
| 28.3k xp | 3 posts

como aplicar uma cor um uma imagem svg com o hover, ou seja quando passar o mause a imagem muda de cor. exemplos mudar o fundo junto com o desenho. aplicando um fundo preto e desenho fica branco

1 resposta
por Marcio Loureiro
| 144.2k xp | 85 posts
Gerente de Projetos

Ola Jonas! Vai aí um exemplo:

HTML:

<div class="imagem-hover">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <!-- Coloque aqui o código do seu desenho SVG -->
  </svg>
</div>

**CSS: **

.imagem-hover {
  width: 200px; /* Defina a largura desejada */
  height: 200px; /* Defina a altura desejada */
  background-color: black; /* Cor de fundo inicial */
  transition: background-color 0.3s; /* Transição suave de cor */
}

.imagem-hover:hover {
  background-color: white; /* Cor de fundo ao passar o mouse */
}

Neste exemplo, envolvemos o código SVG em uma

com a classe "imagem-hover". Definimos um tamanho para essa
usando width e height. Em seguida, definimos a cor de fundo inicial como preto e aplicamos uma transição suave de cor usando transition. Quando o mouse passa por cima da
(hover), aplicamos a cor de fundo branca usando a regra .imagem-hover:hover.

Lembre-se de substituir o comentário pelo código SVG real do desenho que você deseja exibir.

Esse código fará com que a imagem SVG mude de cor de fundo para branco quando o mouse passar por cima dela. Você pode ajustar as propriedades conforme necessário para atender aos requisitos do seu projeto.

Espero que isso ajude! Se você tiver mais dúvidas, por favor, me avise.

Abs e Bons Estudos!