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:
. produtosDestaqueBoxItem
e. produtoDestaqueBox
são irmãs?