Как я могу показать div только при наведении курсора на элемент меню или div? - PullRequest
Новая
       11

Как я могу показать div только при наведении курсора на элемент меню или div?

0 голосов
/ 12 февраля 2012

У меня есть элементы, содержащиеся в неупорядоченном списке. У меня есть скрытые div (используя display: none;) за пределами этого списка. Когда вы наводите курсор мыши на элемент списка, я бы хотел, чтобы появился div. Он также должен оставаться видимым, если вы перемещаете указатель мыши от элемента списка к элементу под ним.

Я открыт для выполнения этого через CSS, JavaScript / jQuery. Кроме того, мой документ настроен на HTML5.

Это то, с чем я сейчас работаю. 

<nav id="main-menu">
        <ul>
            <li><a class="first-link parent" href="">First Link</a></li>
            <li><a class="second-link parent" href="">Second Link</a></li>
            <li><a class="third-link parent" href="">Third Link</a></li>
            <li><a class="fourth-link parent" href="">Fourth Link</a></li>
        </ul>
    </nav><!-- #main-menu !-->

А под навигацией у меня есть контент, который я хотел бы отображать при наведении курсора на соответствующий элемент. 

        <div id="first-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .first-widget !-->


<div id="second-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .second-widget !-->

<div id="third-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .third-widget !-->



<div id="fourth-widget" class="widget-container">
            <h2>Sub Title</h2>              
            <p>Lorem Ipsum
            <a href="#">Read More</a></p>

        </div><!-- .fourth-widget !-->

    </aside><!-- .hidden !-->

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

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

Ответы [ 2 ]

4 голосов
/ 12 февраля 2012

Вы можете обернуть виджеты в div и прикрепить к нему событие mouseleave. Это решение также использует rel attibute для хранения виджета id: DEMO

HTML

* * 1010

JS 

$('#main-menu a').mouseover(function() {
   var $this = $(this);
   var id = $this.attr('rel');
   var $currentWidget = $('#' + id);
   $currentWidget.show().siblings('.widget-container').hide();
});
$('#wrap').mouseleave(function() {
    $('.widget-container').hide();
});
2 голосов
/ 12 февраля 2012

Нечто подобное должно работать.

Использование .hover для привязки события, .index и .eq длянайдите, какой из них показать / скрыть, а также собственные методы JS для тайм-аутов, чтобы вы могли навести курсор на div. 

var timeout; // store a timeout here

$('#main-menu lia ').hover(function ()
{
    $('.widget-container').eq($(this).parent().index()).show();
}, function ()
{
    timeout = setTimeout(function ()
    {
        $('.widget-container').eq($(this).parent().index()).hide();
    }, 1000);
);

$('.widget-container').hover(function ()
{
    clearTimeout(timeout);
}, function ()
{
    timeout = setTimeout(function ()
    {
        $(this).hide();
    }, 1000);
});
...