Come posso effettuare il flyout di DIV in risposta a un evento di hover (come il sito di National Geographic) utilizzando jQuery?

Question

Ho un problema simile alla domanda sollevata here, ma un caso un po 'diverso.

---

La funzionalità che sto cercando è quasi identico al National Geographic website, dove il "sneak peek" appare quando si passa sopra uno dei collegamenti principali, e rimane visibile durante l'interazione con esso, o si libra sopra il bambino menu, ma scompare quando non passa il mouse sopra la voce di menu, i collegamenti figlio o la "anteprima".

---

Quando ho passaggio del mouse sopra le voci di elenco di seguito, vorrei un DIV che ho specificato (in questo caso corrispondenti per numero - ma vorrei che la flessibilità necessaria per definire il nome div individualmente se non esistono i numeri , o non corrispondono [sto usando Drupal, e tutto viene generato dinamicamente]) per far scorrere, o semplicemente apparire, sotto di esso (l'elenco sarà in linea). Deve rimanere aperto in modo che le persone possano fare clic sul collegamento visualizzato nel DIV, ma quando si estrae il mouse dal DIV o dalla voce dell'elenco, il div deve scomparire.

mio HTML sembra più simile a questo:

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

mio CSS si presenta così:

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

E la mia jQuery (in base alla risposta di Carl Meyer per l'altro thread, che sono sicuro ho impasticciato fino orribilmente) si presenta così:

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

io non sono a conoscenza di come questo codice sta lavorando, e hanno ape n sto cercando di capirlo, ma non sono sicuro di capire l'uso di "idx" e di come il singolare termine "slide" entra in gioco.

Sono abbastanza nuovo di jQuery e sono stato incaricato di questo progetto. Apprezzo qualsiasi aiuto, e spero che anche gli altri possano trovarlo utile!

Answer 1

In pratica, è necessario nidificare il pop-up all'interno dell'elemento che lo attiva, quindi utilizzare la pseudo-classe :hover per visualizzarlo. Se hai bisogno che funzioni in IE6, devi allegare alcuni script per la soluzione alternativa: la simulazione del passaggio del mouse, ma è abbastanza semplice trovarla sulla rete. Se hai bisogno di transizioni, usa gli eventi del mouse con lo stesso markup.

Esempio qui: http://jsfiddle.net/YNSVj/1/

Ecco la marcatura:

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

Ed ecco 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; 
} 

Si noti che è necessario impostare un'altezza esplicita per la voce di menu, e quindi gioca con il valore del margine superiore del blocco popup, in modo che non venga rimosso se l'utente cambia dimensione del carattere.

Inoltre, tenere presente che questa è la soluzione più semplice e potrebbe non essere applicabile in alcune situazioni.