Jump to content

Fazer um transition ao usar mouseover e mouseout


Recommended Posts

BHAMF

Eu queria aplicar uma transição neste código aqui

<script type="text/javascript">					
					whatsappImageDiv = document.querySelector('.whatsappDiv');
					whatsappImageDiv.addEventListener('mouseover', mouseEntrou);
					whatsappImageDiv.addEventListener('mouseout', mouseSaiu);

					whatsappImage = document.querySelector('.icon-whatsapp');

					textoCont = document.querySelector('.textoAlt');

					function mouseEntrou() {
						
						textoCont.classList.remove('displayNone');						
						whatsappImage.classList.remove('displayBlock');

						textoCont.classList.add('displayBlock');
						whatsappImage.classList.add('displayNone');
                      
						console.log('entrou');
					}
					function mouseSaiu() {						
						textoCont.classList.remove('displayBlock');						
						whatsappImage.classList.remove('displayNone');

						textoCont.classList.add('displayNone');
						whatsappImage.classList.add('displayBlock');
						console.log('saiu');
					}
				</script>

Que tem o seguinte HTML:

<section class="secContato">
		<div class="flexContact">
			<div class="quadrado1Contact">
				<h3 class="descContato">Deseja fazer uma tattoo? Vai no nosso Whatsapp e troca uma ideia com a gente sobre a tattoo ;) Não esquece de dá uma conferida no horario de atendimento também, ok?</h3>
				
				<a class="a" href=""><div class="whatsappDiv">
					<h2 id="textoAlt" class="textoAlt">Clique aqui para ir para o Whatsapp!</h2>
					<p class="icon-whatsapp"></p>
				</div></a>
				
				

				<script type="text/javascript">					
					<...> //nosso script
				</script>
				
			</div>
			<div class="quadrado2Contact">
				<...> //uma segunda div que não precisa ser comentada
			</div>
			<div class="clear2"></div>

		</div>
	</section>

Eu poderia fazer com CSS aplicando ao invés de um IMG no código, uma DIV com um background com aquela imagem e daí sim, quando :hover, eu fazia aparecer o nome dentro da DIV. Mas eu queria saber se tem como fazer isso em Javascript, já que o código em JS está todo pronto e está faltando apenas a transição... Vocês poderiam me ajudar? Obrigado desde já! Espero respostas ^^

Brenio Hallison A.M. Filho

 

Link to post
Share on other sites
BHAMF
Agora, BHAMF disse:

Eu queria aplicar uma transição neste código aqui


<script type="text/javascript">					
					whatsappImageDiv = document.querySelector('.whatsappDiv');
					whatsappImageDiv.addEventListener('mouseover', mouseEntrou);
					whatsappImageDiv.addEventListener('mouseout', mouseSaiu);

					whatsappImage = document.querySelector('.icon-whatsapp');

					textoCont = document.querySelector('.textoAlt');

					function mouseEntrou() {
						
						textoCont.classList.remove('displayNone');						
						whatsappImage.classList.remove('displayBlock');

						textoCont.classList.add('displayBlock');
						whatsappImage.classList.add('displayNone');
                      
						console.log('entrou');
					}
					function mouseSaiu() {						
						textoCont.classList.remove('displayBlock');						
						whatsappImage.classList.remove('displayNone');

						textoCont.classList.add('displayNone');
						whatsappImage.classList.add('displayBlock');
						console.log('saiu');
					}
				</script>

Que tem o seguinte HTML:


<section class="secContato">
		<div class="flexContact">
			<div class="quadrado1Contact">
				<h3 class="descContato">Deseja fazer uma tattoo? Vai no nosso Whatsapp e troca uma ideia com a gente sobre a tattoo ;) Não esquece de dá uma conferida no horario de atendimento também, ok?</h3>
				
				<a class="a" href=""><div class="whatsappDiv">
					<h2 id="textoAlt" class="textoAlt">Clique aqui para ir para o Whatsapp!</h2>
					<p class="icon-whatsapp"></p>
				</div></a>
				
				

				<script type="text/javascript">					
					<...> //nosso script
				</script>
				
			</div>
			<div class="quadrado2Contact">
				<...> //uma segunda div que não precisa ser comentada
			</div>
			<div class="clear2"></div>

		</div>
	</section>

Eu poderia fazer com CSS aplicando ao invés de um IMG no código, uma DIV com um background com aquela imagem e daí sim, quando :hover, eu fazia aparecer o nome dentro da DIV. Mas eu queria saber se tem como fazer isso em Javascript, já que o código em JS está todo pronto e está faltando apenas a transição... Vocês poderiam me ajudar? Obrigado desde já! Espero respostas ^^

Um adendo ao meu tópico, é que já tentei inserir um transition nas referidas classes css e não funciona de jeito nenhum. Ele simplesmente aparece e reaparece sem nenhuma transição. Antes eu estava fazendo com o simples código de .document,style.display = 'none' e vice versa. Tentei ao invés disso, adicionar as classes pra ver se funcionava mas não funcionou. Então, se você pensou em responder assim, saiba que tem de ser de outra maneira

Brenio Hallison A.M. Filho

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.