3

Assim, eu possuo ao todo 4 divs que quero que sejam alteradas quando o mouse passa e quando o mouse sai dela. O efeito que queria fazer deu certo, mas queria diminuir o código para que seja mais fácil a manutenção, por isto estou aqui. Vou passar o código javascript e os dois blocos que estou tentando fazer este for. Também outra pergunta, este efeito não deixa muito pesado a aplicação para o usuário, ou deixa? Obrigado

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>
6

3 Respostas 3

2

Fica uma sugestão com CSS somente:

.bloco1 > * {
    opacity: 1;
    transition: opacity 1s;
}
.bloco1:hover > p, .bloco1:hover > img {
    opacity: 0;
}
.bloco1:hover > .conteudoBloco1 {
    opacity: 1;
}

Pode ainda ter de juntar position: relative; ao elemento .bloco1.

Esta é a melhor maneira do ponto de vista de simplicidade de código e performance.

Exemplo: http://jsfiddle.net/oem6e6uw/3/

1

HTML:

<div class="blocos" id="bloco1">
    <img class="imgBloco1 item-bloco" src="" />IMAGEM DO BLOCO
    <p class="fraseBloco1 item-bloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco1 desc-bloco">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

JS:

$('.blocos').hover(
    function() {
        $(this).find('.item-bloco').stop().fadeOut(0);
        $(this).find('.desc-bloco').stop().fadeIn(1000);
    },
    function() {
        $(this).find('.desc-bloco').stop().fadeOut(0);
        $(this).find('.item-bloco').stop().fadeIn(1000);
    }
);
3
  • 2
    É. Fica a dica de uma solução só com CSS, se a posição dos elementos puder ser fixada: jsfiddle.net/b06jy67a
    – bfavaretto
    25/08/2014 às 19:25
  • Não deu certo, pois o que vai aparecer será no lugar do que sai, também são no caso 4 blocos com o mesmo requesito 25/08/2014 às 20:13
  • Por isso eu falei em fixar as posições. Basicamente, é o que o Sergio fez na resposta dele.
    – bfavaretto
    25/08/2014 às 21:19
0

Uma forma mais limpa de fazer, sem tantas classes e ids:

HTML:

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

jquery:

$('.bloco').hover(function () {
    $(this).children('.imgBloco, .fraseBloco').stop().hide();
    $(this).children('.conteudoBloco').stop().fadeIn(1000);
}, function () {
    $(this).children('.imgBloco, .fraseBloco').stop().fadeIn(1000);
    $(this).children('.conteudoBloco').stop().hide();
});

Veja funcionando no JSFiddle.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .