Вопрос по css, html, onmouseout, jquery, onmouseover – Как я могу показать div только при наведении курсора на элемент меню или div?

0

У меня есть элементы, содержащиеся в неупорядоченном списке. У меня есть скрытые 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   ответа
2

С помощью.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);
});
Значительная настройка: Pjsfiddle.net/nx6JY Joe
Джо, большое спасибо, что нашли время помочь мне. Я попробую это сейчас и дам вам знать, как это происходит. Ryan
Джо, спасибо за быстрый ответ. Я добавил следующее на свою страницу, но виджеты не появляются.<script type="text/javascript"> $(document).ready(function() { $('#home-nav ul li a ').hover(function () { $('.widget-container').eq($(this).parent().index()).toggle(); }); } </script> Ryan
4

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

HTML

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

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

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();
});
Еще раз большое спасибо. Последний вопрос ... Есть ли способ сохранить начальный пункт меню в состоянии: hover после того, как наведу указатель мыши на контейнер .widget? Ryan
О, хедз-ап, я немного улучшил JS. shaunsantacruz
Нет проблем. Не стесняйтесь пометить это как принятый ответ, если он работает для вас. Спасибо shaunsantacruz
Спасибо вам большое! Похоже, это помогло мне. Ryan
Нравится?jsfiddle.net/alpacalips/MZG48/2 shaunsantacruz

Похожие вопросы