Siga-nos:

Como Criar Efeito Mouse Hover no Texto

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
				
			

Compartilhe este Artigo:

Fred Bueno

Fred Bueno

Sou Web Designer da Buenosites e fundador do projeto online Empreendedor Digital WordPress, portal especializado em Tutoriais e Dicas WordPress para Freelancers, Autônomos e Empreendedores.

Ver mais Artigos

Inscreva-se e receba nossas Newsletters

Receba Artigos como este diretamente em seu e-mail?

Deixe um comentário

O seu endereço de e-mail não será publicado.

Mais Posts como este...

E-Book Gratuitos

10 Vantagens de Usar o WordPress + Briefing Estratégico

10 Vantagens de Usar o WordPress + Briefing Estratégico

Descubra o que é preciso para começar [da maneira certa] a criação do seu site e evite o fracasso total do seu projeto!

Baixar Grátis
Manual de Segurança WordPress - Buenosites

30 Técnicas para BLINDAR seu Site WordPress.

30 Dicas de como BLINDAR seu Site WordPress das ameaças da Internet!

Baixar Grátis

Conheça Nossos

Serviços

Criação de Sites Profissionais

Faça como muitas empresas de sucesso, Fuja da crise investindo na Criação de um Site. Seja encontrado hoje mesmo pelos seus clientes. Divulgue Melhor e Faça Mais Vendas.

Criação de Logotipos

Crie um Logotipo Autêntico e destaque sua Empresa. Fique na Frente dos Concorrentes. Passe uma Imagem de Confiança e Criativa para seus Clientes criando uma Marca Profissional.

Pesquisar no Site

Procurando por alguma informação específica? Digite no campo abaixo o que deseja saber.