Comment puis-je faire en sorte que les DIVs s'affichent en survol en réponse à un événement (comme sur le site de National Geographic) en utilisant jQuery?

Question

J'ai un problème similaire à la question posée ici, mais un cas un peu différent.

---

La fonctionnalité que je recherche est presque identique au site Web de National Geographic, où l'aperçu apparaît lorsque vous survolez l'un des liens principaux, et reste visible lors de l'interaction avec celui-ci, ou en survolant le menu enfant, mais disparaît lorsque vous ne survolez pas l'élément de menu, les liens enfants, ou l'aperçu.

---

Lorsque je survole les éléments de liste ci-dessous, je voudrais qu'un DIV que je spécifie (dans ce cas correspondant par numéro - mais j'aimerais avoir la flexibilité de définir le nom du div individuellement si les numéros n'existent pas, ou ne correspondent pas [j'utilise Drupal, et tout est généré dynamiquement]) se déplace vers l'extérieur, ou apparaît simplement, en dessous (la liste sera en ligne). Il doit rester ouvert pour que les gens puissent cliquer sur le lien qui apparaît dans le DIV, mais lorsque vous survolez le DIV ou l'élément de liste, le div doit disparaître.

Mon HTML ressemble plus à ceci :

      Premier élément
      Deuxième élément
      Troisième élément
      Quatrième élément

        Premier bloc
        Cliquez ici !

        Deuxième bloc
        Cliquez ici !

        Troisième bloc
        Cliquez ici !

        Quatrième bloc
        Cliquez ici !

Mon CSS ressemble à ceci :

#switches li {
    display: inline-block;
    height: 50px;
    background-color: #F33;
}
#block-1,
#block-2,
#block-3,
#block-4 {
    position: absolute;
    top: 50px;
    height: 300px;
    width: 500px;
    background-color: #999;
    display: none;
}
#block-1.active,
#block-2.active,
#block-3.active,
#block-4.active {
    display: block;
}

Et mon jQuery (basé sur la réponse de Carl Meyer à l'autre fil de discussion, que j'ai sûrement gâché) ressemble à ceci :

$(document).ready(function() {
    switches = $('#switches > li');
    slides = $('#navigation > div.block');
    switches.each(function(idx) {
        $(this).data('slide', slides.eq(idx));
    }).hover(
    function() {
        switches.removeClass('active');
        slides.removeClass('active');
        $(this).addClass('active');
        $(this).data('slide').addClass('active');
    });
});

Je ne suis pas familier avec le fonctionnement de ce code, j'ai essayé de le comprendre, mais je ne suis pas sûr de comprendre l'utilisation de "idx" et comment le terme singulier "slide" entre en jeu.

Je suis assez nouveau en jQuery et j'ai été chargé de ce projet. J'apprécie toute aide, et j'espère que d'autres pourront également le trouver utile !

Answer 1

Fondamentalement, vous devriez imbriquer votre pop-up à l'intérieur de l'élément qui le déclenche, puis utiliser la pseudo-classe :hover pour l'afficher. Si vous avez besoin que cela fonctionne dans IE6, vous devez attacher un script de contournement pour la simulation de :hover, mais c'est assez simple à trouver sur internet. Si vous avez besoin de transitions, utilisez des événements de la souris avec le même balisage.

Exemple ici: http://jsfiddle.net/YNSVj/1/

Voici le balisage:

    Lien 1Ceci est le popup numéro un
    Lien 2Ceci est le popup numéro deux.  Il a un saut de ligne à l'intérieur.

Et voici le CSS:

.item{
    float: left;
    background: #ffc;
    height: 2em;
    padding: 5px 15px 0;
    border: 1px solid #000;
}

.popup
    {
        display: none;
        position: absolute;
        left: 0;
        top: 2em;
        width: 100%;
        margin-top: 17px; /* Pour compenser le padding du bloc parent */
        color: #fff;
        background: #f00;
    }

.item:hover .popup
{
    display: block;
}

Notez que vous devez définir une hauteur explicite pour l'élément du menu, puis jouer avec la valeur de la marge supérieure du bloc pop-up, afin qu'il ne soit pas détaché si l'utilisateur change la taille de la police.

De plus, gardez à l'esprit que ceci est la solution la plus simple et peut ne pas être applicable dans certaines situations.