Preciso de ajuda | CSS Grid: simplificando layouts | Alura

1
resposta

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

11/06/2022

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!