Entrar Ainda não tem acesso?
1
resposta

Preciso de ajuda

Referente ao curso CSS Grid: simplificando layouts, no capítulo Criando o layout da seção de destaques e atividade Estilizando os destaques

por Gustavo De Faria
| 37.9k xp | 39 posts
Jovem aprendiz

Eae, tudo bem? To fazendo esse projeto de um jeito diferente e gostaria de fazer que, ao passar o mouse por cima da imagem dos jogos a imagem mudasse para outra e ao sair fazer ela retornar, quero fazer isso com JavaScript mas não ta dando certo, no momento oq cosnegui foi fazer a imagem do "fortnite" mudar para um bloco Azul escuro quando entro e um Vermelho escuro quando saio, alguém pdoe me dar uma força?

Link o github: https://github.com/Gust77/game-store-grids.git

1 resposta
por Daniela Michely da Silva
| 311.3k xp | 196 posts

Oi, Gustavo.

Uma forma simples de fazer o que você quer é apenas setar o atributo src com o setAttribute.

Veja como:

HTML

<img id="img" src="./img1.png">

Javascript

let img = document.querySelector("#img");
img.addEventListener("mouseover", () => {
  img.setAttribute("src", "img2.png");
});
img.addEventListener("mouseout", () => {
  img.setAttribute("src", "img1.png");
});

Espero que seja o que está procurando.

Bons estudos!