Show a div and hide another in Hover

Asked

Viewed 1,114 times

0

I have 3 Ivs 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 div produtosDestaqueBoxItem.

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

I did it with Jquery:

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

However, this only works in the first item. You would have to use INDEX, ELEMENT?

Example: inserir a descrição da imagem aqui

jquery
  • 1

    The Divs . produtosDestaqueBoxItem and . produtoDestaqueBox are sisters?

  • 1

    I don’t quite understand what you want to do, it’s something similar to this: http://jsfiddle.net/dieegov/p97BN/ ??

  • That’s right @Diegovieira

  • Does this solve your problem? because you can do more than one way, without even using jquery

  • Almost. At Hover, he applies the class I reported, but when he’s out, he’s back to normal

  • @bfavaretto no. A div produtosDestaqueBoxItem has 3 equal, the produtoDestaqueBox appears only in the Hover

  • But what is the relationship between them in HTML?

  • Are 3 Divs produtosDestaqueBoxItemCentralizar. When I hover over one of them, the produtoDestaqueBox no longer be display:none and it gets display:block, it replaces the div. The Jquery I used worked only on the first item.

  • So there’s only one produtoDestaqueBox for the 3 products?

  • @FelipeStoker http://jsfiddle.net/dieegov/p97BN/1/

  • 1

    Basically what I’m trying to understand is whether your HTML is what’s in Jader’s answer or if it’s something else. Please always post the HTML needed for others to reproduce the problem.

  • 1

    @Felipestoker this is my last guess, I’m not quite sure what you want. http://jsfiddle.net/dieegov/p97BN/2/

Show 7 more comments

1 answer

1


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

I think it must be 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>

BS.: If you want, style="display:none" may be incorporated into the class .produtoDestaqueBox

  • Ball show, only he doesn’t hide the div produtosDestaqueBoxItem and shows the div produtoDestaqueBox in her stead.

  • 1

    I just edited, but as I said, you can not hide the element that fires the Hover, so will immediately fire the "mouseout", and void the action, instead.

  • Got it @Jader, thank you very much, it worked! : P

  • Just another question @Jader, I could have used the find in place of children?

  • 1

    Yes it works the same way, the difference is that the find searches even within the children without limit of levels, and Children only in the children of the parent element.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.