0

Tenho 3 divs que mostram 3 produtos:

<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <img src="imagens/produto1 (1).jpg" height="131" width="120" alt="" />
    </div>
</div>
<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <img src="imagens/produto1 (2).jpg" height="131" width="120" alt="" />
    </div>
</div>
<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <img src="imagens/produto1 (3).jpg" height="131" width="120" alt="" />
    </div>
</div>

E uma div com display:none que aparece só quando passa o mouse em cima da div produtosDestaqueBoxItem.

<div style="display:none" class="produtoDestaqueBox">teste</div>

Fiz isso com Jquery:

$(".produtosDestaqueBoxItem").hover(function () {
    $(this).hide();
    $('.produtoDestaqueBox').show();
});

Porém, isso funciona apenas no primeiro item. Teria que usar INDEX, ELEMENT?

Exemplo: inserir a descrição da imagem aqui

12

1 Resposta 1

1

Você esta ocultando o elemento que esta disparando o hover...

acho que deve ser algo assim:

jquery:

$( ".produtosDestaqueBoxItem" ).hover(
  function() {
    $( this ).children(".produtosDestaqueBoxItemCentralizar").hide();
    $( this ).children(".produtoDestaqueBox").fadeIn();
  },
  function() {
    $( this ).children(".produtosDestaqueBoxItemCentralizar").show();
    $( this ).children(".produtoDestaqueBox").fadeOut();
  }
);

HTML:

<div class="produtosDestaqueBoxItem">
    <div class="produtosDestaqueBoxItemCentralizar">
        <img src="imagens/produto1 (1).jpg" height="131" width="120" alt="" />
    </div>
    <div style="display:none" class="produtoDestaqueBox">teste</div>
</div>

obs.: Se quiser, style="display:none" pode ser incorporado na classe .produtoDestaqueBox

5
  • Show de bola, só que ele não esconde a div produtosDestaqueBoxItem e mostra a div produtoDestaqueBox no lugar dela. Commented 5/08/2014 às 19:26
  • 1
    acabo de editar, mas como eu disse, você não pode ocultar o elemento que dispara o hover, pois assim vai imediatamente disparar o "mouseout", e anular a ação, ao invez disso, oculte todo o restante do conteúdo, mantendo o div que esta disparando o hover visível. Commented 5/08/2014 às 19:31
  • Entendi @Jader, muito obrigado, funcionou! :P Commented 5/08/2014 às 19:34
  • Só uma outra dúvida @Jader, eu poderia ter usado o find no lugar do children? Commented 6/08/2014 às 16:55
  • 1
    Sim funciona do mesmo jeito, a diferença é que o find procura até dentro dos filhos sem limite de níveis, e o children apenas nos filhos do elemento pai. Commented 6/08/2014 às 17:06

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 .