post #6158

Código JavaScript para Trocar Imagens ao Passar o Mouse em Seções no Elementor ou HTML puro

Publicado em: 11/04/2025 / Atualizado em: 11/04/2025

Categorias: BlogCSSElementorElementorJavaScript (JS)JSWordpress

Nesse post, eu vou compartilhar um código CSS e JavaScript para que você tenha a possibilidade de trocar imagens dependendo da posição do mouse. Isso significa que você pode criar algumas colunas de conteúdo e, ao passar ao mouse entre as colunas, as imagens de uma outra sessão se alteram automaticamente.

<!-- CSS + JS para atualizar a thumbnail do menu com base na seção que passar o mouse -->
<style>
.image-column > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.image-column > div.active {
  opacity: 1;
  z-index: 1;
}
</style>

<script>
  const imageContainers = document.querySelectorAll('#image-column > div');
  const textColumns = document.querySelectorAll('.text-column');

  textColumns.forEach(column => {
    column.addEventListener('mouseenter', () => {
      const index = column.getAttribute('data-index');

      imageContainers.forEach(div => div.classList.remove('active'));
      if (imageContainers[index]) {
        imageContainers[index].classList.add('active');
      }
    });
  });
</script>

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/6158

ID de Referência: 6158

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato