Bom, como prometido aqui vem a solução. Tomei como base uma conversa com o ChatGPT, mas ele faz sempre códigos genéricos e simplificados, então adaptei ao uso com o Elementor. Vai ser necessário uso de código adicional, mas é relativamente simples de fazer. No meu teste (que está no link da resposta anterior) tomei como base a estrutura que você montou onde do lado esquerdo existem elementos de texto e do lado direito a imagem a ser substituída com o efeito de hover nos textos.
Siga os seguintes passos:
Passo 1 - crie a estrutura a ser utilizada. Com base no seu exemplo criei a estrutura mostrada nessa print abaixo e para isso usei um container flexbox com duas colunas; na coluna à esquerda usei elementos de título e na coluna à direita elementos de imagem. Se você for utilizar mais de um elemento de texto em que deseja ter o efeito hover, talvez seja melhor aplicar eles dentro de novos containeres e assim colocar o efeito sobre o container como um todo e não sobre os elementos. Nesse caso faça as adaptações necessárias.
Passo 2 - Nos elementos de texto (ou containeres internos, dependendo de como você vai fazer), edite cada um deles, vá nas opções avançadas e coloque a seguinte classe: hover-trigger (será as mesma em todos eles)
Passo 3 - Ainda nas opções avançadas siga até atributos e coloque data-target|img1 Nesse caso cada elemento terá um atributo diferente e será relacionado à imagem a ser usada. No meu caso o título 1 leva o atributo data-target|img1, o título 2 leva o atributo data-target|img2 e o título 3 leva o atributo data-target|img3
Passo 4 - A próxima etapa é trabalhar nas imagens. Edite cada imagem, vá em avançado e coloque as seguintes classes:
Para a imagem 1: hover-img img1 active
Para a imagem 2: hover-img img2
Para a imagem 3: hover-img img3
E assim por diante caso use mais de três. Uma delas deve ter a classe active para que possa ser apresentada antes de ocorrer qualquer interação do usuário, nesse caso coloquei na imagem 1 mas você pode usar com qualquer outra; a única ressalva é que apenas uma delas deve receber essa classe senão poderá dar conflito.
Passo 5 - A etapa seguinte é colocar o código de JS. Conforme a primeira print (da estrutura do site), coloque o código separado de todo o restante para evitar problemas e para ter uma organização melhor. Recomendo que seja colocado no final da página em um container próprio. Jogue um widget de html e cole o código abaixo:
<script>
document.querySelectorAll('.hover-trigger').forEach(trigger => {
trigger.addEventListener('mouseenter', function() {
const target = this.getAttribute('data-target');
document.querySelectorAll('.hover-img').forEach(img => {
img.classList.remove('active');
});
const imgToShow = document.querySelector('.hover-img.' + target);
if (imgToShow) imgToShow.classList.add('active');
});
});
</script>
Passo 6 - E a etapa final é colocar o CSS adicional. Clique no ícone de configurações do site e depois acesse CSS adicional e coloque o código abaixo:
.hover-img {
position: absolute;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.hover-img.active {
opacity: 1;
z-index: 1;
}
Com isso você deverá ter o efeito desejado.
Observações:
- Na verdade a ordem a ser seguida é irrelevante e somente após aplicar todas as etapas o efeito ocorrerá conforme desejado.
- Fique atento ao fato de que durante a edição as coisas não funcionarão como desejado; tendo isso em mente, siga todos os passos mesmo que não pareça funcionar na edição do Elementor.
- Teste abrindo a página efetivamente para visualização.
- Após colocar o CSS adicional as imagens devem “sumir”, então para selecioná-las para edição use o navegador de elementos, como na primeira print do post.
