JQuery afficher la DIV sur une autre DIV à la souris

Je sais que cela a une solution simple mais je suis un Jquery noob. S'il vous plaît, aider.
Comment puis-je afficher une DIV sur une autre DIV à la souris?

Exemple, j'ai ceci:

<div class="box"> Info about a game </div>

Je veux "superposition" un autre div sur la div "box"

<div class="overlay"> Play </div>

Comment puis-je le faire avec JQuery?

Désolé et merci d'avance!

OriginalL'auteur DavidF | 2012-04-10

  1. 32

    Si je vous comprends bien, vous souhaitez uniquement afficher overlay lors du survol d' box.

    Vous pouvez utiliser CSS pseudo :hover:

    <div class="box">
    Info about a game
    <div class="overlay"> Play </div>
</div>​

div.box div.overlay
{
    display:none;
}

​div.box:hover div.overlay
{
 display:block;   
}​

    http://jsfiddle.net/Curt/BC4eY/

    Si vous préférez utiliser l'animation/jquery pour afficher/masquer la overlay vous pouvez utiliser les éléments suivants:

    $(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});​

    http://jsfiddle.net/Curt/BC4eY/2/

    Oui, vous avez raison. Mais est-ce compatible avec tous les navigateurs?
    Il est compatible avec une grande majorité de navigateurs quirksmode.org/css/contents.html
    Voir mon edit. J'ai fourni une animation jquery version trop.
    Super! C'est ce que je cherchais! Merci beaucoup!

    OriginalL'auteur Curt

  2. 3

    Vous pouvez avoir un autre élément DIV avec la classe 'au sujet de' qui sera situé là où vous le souhaitez.
    Et de aura de style CSS:
    opacity:0;

    Ensuite en JS que vous avez à écrire petit script, qui sera situé dans le onload /fonction ready, quelque chose comme ça:

    $(document).ready(function() {
  $('div.box').hover(function() {
    $(this).children('.overlay').fadeIn();
  }, function() {
    $(this).children('.overlay').fadeOut();
  });
});

    Si cet élément sera la superposition de quelque chose sur le dessus, alors il est préférable d'utiliser l'attribut CSS "display:none" pour éviter cet élément transparent prise sur les événements de la souris.

    Cela ne fonctionnera pas si il y a plusieurs box sur la page. Utilisation $(this) à la place. Voir ma réponse stackoverflow.com/a/10087695/370103
    Ce n'est pas exact de code, et est juste pour l'exemple comment le faire. Si l'utilisateur a besoin de plusieurs éléments DIV être montré / caché, puis il continue de la sorte, si il a des besoins plus spécifiques, il peut aller à votre façon ou d'être plus précis dans la sélection des objets à l'aide de sélecteur jquery, par exemple à l'aide de l'ID au lieu de la CLASSE.

    OriginalL'auteur moka