Как сделать всплывающее окно DIV в ответ на событие зависания (например, сайт National Geographic) с помощью jQuery?

Question

У меня есть проблема, аналогичная поднятому вопросу здесь , но несколько иной случай.

---

Функциональность, которую я ищу, почти идентична Веб-сайт National Geographic , где «подглядывание» появляется при наведении курсора на одну из основных ссылок и остается видимым при взаимодействии с ним или при наведении курсора на дочернее меню, но исчезает, если не навести курсор на элемент меню, дочерние ссылкиили "sneak peek".

---

При наведении указателя мыши на элементы списка ниже, я хотел бы указать DIV, который я указываю (в данном случае, соответствующий номеру - но я бы хотел гибкость, чтобы определитьимя div по отдельности, если числа не существуют или не совпадают [я использую Drupal, и все динамически генерируется]), чтобы выдвинуться или просто появиться под ним (список будет встроен).Он должен оставаться открытым, чтобы люди могли щелкнуть ссылку, которая появляется в DIV, но когда вы наведите курсор мыши на DIV или элемент списка, div должен исчезнуть.

Мой HTML выглядит примерно так:

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

Мой CSS выглядит следующим образом:

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

А мой jQuery (основываясь на ответе Карла Мейера на другой поток, который, я уверен, я испортил ужасно) выглядит такэто:

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

Я не знаком с тем, как работает этот код, и пытался разобраться в нем, но я не уверен, что понимаю использование «idx» и как единственное числотермин «слайд» вступает в игру.

Я довольно новичок в jQuery, и мне поручено выполнение этого проекта.Я ценю любую помощь и надеюсь, что другие найдут ее полезной!

Answer 1

По сути, вы должны вложить свое всплывающее окно в элемент, который его запускает, затем использовать псевдокласс :hover, чтобы показать его.Если вам нужно, чтобы это работало в IE6, вам нужно прикрепить некоторый обходной скрипт для: имитации наведения, но это довольно просто найти в сети.Если вам нужны переходы, используйте события мыши с той же разметкой.

Пример здесь: http://jsfiddle.net/YNSVj/1/

Вот разметка:

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

А вот 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;
}

Обратите внимание, что вы должны установить явную высоту для пункта меню, а затем поиграть со значением верхнего поля всплывающего блока, чтобы он не оторвался при изменении пользователяразмер шрифта.

Также имейте в виду, что это наиболее простое решение, которое может быть неприменимо в некоторых ситуациях.