3
So, I have all 4 Ivs that I want to be changed when the mouse passes and when the mouse leaves it. The effect I wanted to make worked, but I wanted to decrease the code to make it easier to maintain, so here I am. I’ll pass the javascript code and the two blocks I’m trying to do this for. Also another question, this effect does not leave too heavy the application for the user, or let? Thank you
JS
$('#bloco1').mouseenter(function (){
$('.fraseBloco1').stop().fadeOut(0);
$('.imgBloco1').stop().fadeOut(0);
$('.conteudoBloco1').stop().fadeIn(1000);
});
$('#bloco1').mouseleave(function (){
$('.conteudoBloco1').stop().fadeOut(0);
$('.fraseBloco1').stop().fadeIn(1000);
$('.imgBloco1').stop().fadeIn(1000);
});
HTML
<div class="bloco1" id="bloco1">
<img class="imgBloco1" src="" />IMAGEM DO BLOCO
<p class="fraseBloco1">AQUI É TIPO UM TITULO</p>
<span class="conteudoBloco1" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>
Is this what you look like now? http://jsfiddle.net/oem6e6uw/
– Sergio
type http://jsfiddle.net/oem6e6uw/2/
– hahnmatheus
Okay. Is this what you’re looking for? http://jsfiddle.net/oem6e6uw/3/
– Sergio
Perfect, thank you very much.
– hahnmatheus
But this won’t have a problem with IE 7?
– hahnmatheus
IE7 is history. Microsoft has even stopped officially supporting IE8. But if you want to join
filter: alpha(opacity=0);
but I wouldn’t do it.– Sergio