Wie kann ich mithilfe von jQuery DIVs als Reaktion auf ein Hover-Ereignis (wie die National Geographic-Site) in den Flyout-Modus versetzen?

Question

Ich habe ein Problem ähnlich der Frage aufgeworfen here, aber ein etwas anderer Fall.

---

Die Funktionalität ich suche ist fast identisch mit dem National Geographic website, wo die „Sneak Peek“ erscheint, wenn über eine der wichtigsten Links schwebt und bleibt sichtbar, während sie mit ihm interagieren, oder über das Kind schwebt Menü, verschwindet aber, wenn Sie nicht über den Menüpunkt, untergeordnete Links oder den "Sneak Peek" schweben.

---

Wenn ich über die Listenelemente unter Mouseover, würde ich einen DIV mag, die ich (in diesem Fall entspricht der Zahl angeben - aber ich würde die Flexibilität wie die div Namen einzeln zu definieren, wenn Zahlen existieren nicht oder nicht übereinstimmen [Ich benutze Drupal, und alles wird dynamisch generiert]), um darunter zu gleiten oder nur darunter zu erscheinen (die Liste wird inline sein). Es muss geöffnet bleiben, damit die Benutzer auf den Link klicken können, der im DIV angezeigt wird. Wenn Sie jedoch aus dem DIV oder dem Listenelement auszoomen, muss das Div verschwinden.

Mein HTML sieht mehr wie folgt aus:

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

Meine CSS wie folgt aussieht:

#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; 
} 

Und meine jQuery (basierend auf Carl Meyer Antwort auf den anderen Thread, die ich bin sicher, ich habe schrecklich verpfuscht up) sieht wie folgt aus:

$(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'); 
    }); 
}); 

ich bin nicht vertraut mit, wie dieser Code funktioniert, und Biene haben Ich versuche, es auszuarbeiten, aber ich bin mir nicht sicher, ob ich die Verwendung von "idx" verstehe und wie der singuläre Slide-Begriff ins Spiel kommt.

Ich bin ziemlich neu zu jQuery und wurden mit diesem Projekt beauftragt. Ich schätze jede Hilfe, und ich hoffe, dass andere es auch nützlich finden können!

Answer 1

Grundsätzlich sollten Sie Ihr Popup in das Element verschachteln, das es auslöst, dann verwenden Sie :hover Pseudo-Klasse, um es zu zeigen. Wenn Sie dies in IE6 benötigen, müssen Sie ein Workaround-Skript für: Hover-Simulation anhängen, aber das ist ziemlich einfach im Internet zu finden. Wenn Sie Übergänge benötigen, verwenden Sie Mausereignisse mit demselben Markup.

Beispiel hier: http://jsfiddle.net/YNSVj/1/

Hier ist der Auszeichnungs:

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

Und hier ist 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; 
} 

Beachten Sie, dass Sie eine explizite Höhe für den Menüpunkt gesetzt haben, und dann mit dem oberen Randwert des Popup-Blocks spielen, so dass er nicht weggerissen wird, wenn der Benutzer die Schriftgröße ändert.

Denken Sie auch daran, dass dies die einfachste Lösung ist und in manchen Situationen möglicherweise nicht anwendbar ist.