JQuery'yi kullanarak bir hover etkinliğine (National Geographic sitesi gibi) yanıt olarak DIV'leri nasıl uçurur?

Question

here numaralı soruna benzer bir sorunum var ama biraz farklı bir durum var.

---

aradığım işlevselliği ana bağlantılardan birini üzerine gelindiğinde "gizli gözlem" görünür National Geographic website, neredeyse aynı olduğunu ve onunla etkileşime veya çocuk üzerinde gezinip ederken görünür kalır Menü, ancak menü öğesi, alt linkler veya "sneak peek" üzerinde gezdirilemediğinde kaybolur.

---

aşağıda liste öğeleri üzerinde mouseover, ben sayısına göre karşılık gelen bu durumda (belirttiğiniz bir DIV istiyorum - ama sayılar yokmuşçasına ayrı ayrı div adını tanımlamak için esneklik istiyorum ya da [Drupal kullanıyorum ve her şey dinamik olarak üretilir] ile eşleşmiyor ya da altında görünecek (liste satır içi olacak). İnsanların DIV'de görünen bağlantıyı tıklayabilmesi için açık kalması gerekir, ancak DIV'den veya liste listesinden mouseout yaptığınızda, div'in kaybolması gerekir.

Benim HTML daha şuna benzer:

Benim CSS şöyle

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

:

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

Ve eminim diğer iplik Carl Meyer'in cevap dayalı my jQuery (Ben korkunç botched ettik) şöyle görünür:

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

Bu kod nasıl çalıştığını aşina değilim ve arı n çalışmayı deniyorum, ama "idx" in kullanımını ve tekil "slayt" teriminin nasıl işlediğini anladığımdan emin değilim.

jQuery için oldukça yeni ve bu projeyle görevlendirildim. Herhangi bir yardım için minnettarım, ve umarım diğerleri de onu faydalı bulabilir!

Answer 1

Temel olarak, pop-up'ınızı tetikleyen öğenin içine yerleştirmeniz ve daha sonra göstermek için :hover sözde sınıfını kullanmanız gerekir. IE6'da çalışmak için buna ihtiyacınız varsa, bunun için geçici bir komut dosyası eklemeniz gerekir: hover simülasyonu, ancak internette bulmak oldukça kolay. Geçişlere ihtiyacınız varsa, aynı olayları içeren fare olaylarını kullanın. Burada

Örnek: Aşağıda http://jsfiddle.net/YNSVj/1/

biçimlendirme geçerli:

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

Ve burada CSS şudur: menü öğesi için açık bir yüksekliğe ayarlamak zorunda

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

Not ve sonra pop-up bloğunun üst kenar boşluğu değeriyle oynayın, böylece kullanıcı font boyutunu değiştirirse parçalanmayacaktır. Ayrıca, bunun en basit çözüm olduğunu ve bazı durumlarda geçerli olmayabileceğini unutmayın.