Show a div and hide another in Hover

Navigation
0

I have 3 divs that show 3 products: 

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

And a div with display:none that appears only when you hover over the produtosDestaqueBoxItem div. 

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

I did this with Jquery: 

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

However, this only works on the first item. Would you use INDEX, ELEMENT?

Example:

    
asked by anonymous 05.08.2014 / 20:09

1 answer

1

You are hiding the element that is firing hover ...

I think it should look something like this:

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>

Note: If you want, style="display:none" can be embedded in class .produtoDestaqueBox

    
05.08.2014 / 21:08
ERROR findViewById ListView fragment Boolean Array in Grid