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

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:


Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=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