Comment puis-je faire un flyout DIVs en réponse à un événement hover (comme le site National Geographic) en utilisant jQuery?

Question

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

---

La fonctionnalité que je suis à la recherche est presque identique à National Geographic website, où le « aperçu » apparaît lors du survol sur l'un des liens principaux, et reste visible tout en interagissant avec elle, ou en vol stationnaire au-dessus de l'enfant menu, mais disparaît lorsque vous ne survolez pas l'élément de menu, les liens enfants ou le "coup d'oeil".

---

Quand je mouseOver sur les éléments de la liste ci-dessous, je voudrais un DIV que je précise (dans ce cas, correspondant par numéro - mais je voudrais la possibilité de définir le nom de div individuellement si les chiffres n'existent pas , ou ne correspondent pas [J'utilise Drupal, et tout est généré dynamiquement]) pour glisser, ou juste apparaître, en dessous (la liste sera en ligne). Il doit rester ouvert pour que les gens puissent cliquer sur le lien qui apparaît dans la DIV, mais lorsque vous quittez la DIV ou l'élément de la liste, le div doit disparaître.

Mon HTML ressemble plus à ceci:

<div id="navigation"> 
    <ul id="switches"> 
     <li class="item-1">First item</li> 
     <li class="item-2">Second item</li> 
     <li class="item-3">Third item</li> 
     <li class="item-4">Fourth item</li> 
    </ul> 
    <div id="block-1" class="block"> 
     <p>First block</p> 
     <p><a href="http://www.google.com">Click here!</a></p> 
    </div> 
    <div id="block-2" class="block"> 
     <p>Second block</p> 
     <p><a href="http://www.google.com">Click here!</a></p> 
    </div> 
    <div id="block-3" class="block"> 
     <p>Third block</p> 
     <p><a href="http://www.google.com">Click here!</a></p> 
    </div> 
    <div id="block-4" class="block"> 
     <p>Fourth block</p> 
     <p><a href="http://www.google.com">Click here!</a></p> 
    </div> 
</div> 

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, que je suis sûr J'ai bâclé horriblement) 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 au courant de la façon dont ce code fonctionne, et ont abeille J'essaie de le résoudre, mais je ne suis pas sûr de comprendre l'utilisation de "idx" et comment le terme "slide" singulier entre en jeu. Je suis assez nouveau à jQuery et ai été chargé de ce projet. J'apprécie n'importe quelle aide, et j'espère que d'autres peuvent la trouver utile aussi bien!

Answer 1

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

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

Voici le balisage:

<ul class="menu"> 
    <li class="item"><a href="#">Link 1</a><div class="popup">This is popup number one</div></li> 
    <li class="item"><a href="#">Link 2</a><div class="popup">This is popup number two. <br/> It has a line break inside.</div></li> 
</ul> 

Et voici 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; /* To compensate for parent block's padding */ 
     color: #fff; 
     background: #f00; 
    } 

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

Notez que vous devez définir une hauteur explicite pour l'élément de menu, puis jouez avec la valeur de marge supérieure du bloc contextuel, de sorte qu'il ne soit pas arraché si l'utilisateur change la taille de la police.

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