Neste tutorial WordPress + @Elementor vou te mostrar como é possível criar um Efeito de “MOUSE HOVER” sobre o Texto. Esse efeito faz com que, ao passar o mouse por cima de um bloco de texto, a imagem ao lado altere automaticamente.
Para realizar esse efeito, vamos usar alguns códigos JavaScript e Css – que estarão disponíveis no link abaixo:
✅ Curso p/ Freelancers “Como atrair Clientes” → https://freelancermagnetico.com.br/
🔔 Clique aqui e se inscreva no Canal → https://www.youtube.com/fredbueno?sub_confirmation=1
Códigos para Download
Abaixo segue o código que deverá ser colado conforme instruído no tutorial:
-------- CODIGO MAIS CSS ----------
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-mostrar]').hover( function(){
event.preventDefault();
var mostrar = $(this).attr('data-mostrar')
$('.all-section').hide()
$('.' + mostrar).show()
})
})
</script>
<style>
.all-section {
display: none;
}
.section-1{
display: block;
}
</style>
Abaixo segue o códigos que devem ser colados em cada sessão conforme instruído no tutorial:
---------- ATRIBUTOS ----------
data-mostrar|section-1
data-mostrar|section-2
data-mostrar|section-3
---------- CSS ----------
all-section section-1
all-section section-2
all-section section-2
