如何只在悬停菜单项或div时才显示div？ [英] How can I show a div only when hovering a menu item or the div?

问题描述

我有一个项目包含在无序列表中。我有隐藏divs（使用display：none;）这个列表之外。当您将鼠标悬停在列表项上时，我想要显示div。如果您将鼠标从列表项移动到其下面的div，它也必须保持可见。

I have items contained in an unordered list. I have hidden divs (using display:none;) outside of this list. When you hover over a list item, I would like the div to appear. It must also remain visible if you move your mouse from the list item to the div below it.

我可以通过CSS，JavaScript / jQuery来实现。此外，我的文档设置为HTML5。

I am open to accomplish this through CSS, JavaScript/jQuery. Also, my document is set to HTML5.

这是我目前正在使用的。

This is what I am currently working with.

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

在导航栏下方，我将鼠标悬停在相应项目上时要显示的内容。

And beneath the nav, I have the content that I would like to display when hovering over the corresponding item.

        <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不仅显示菜单项，而且当您从菜单移动到可见的div。

I feel like there should be an easy solution to this, but my attempts so far have fallen short. The biggest problem is having the div show not only when hovering the menu item, but also when you move from the menu to the visible div.

任何建议都很感激，感谢您花时间阅读这篇文章。

Any advice is appreciate, thank you for taking the time to read this far.

推荐答案

您可以将小部件包装在 div 中，并将 mouseleave 事件附加到它。此解决方案还使用 rel attibute 来存储小部件 id ： DEMO

You can wrap the widgets in a div and attach a mouseleave event to it. This solution also uses the rel attibute to store the widget 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();
});

这篇关于如何只在悬停菜单项或div时才显示div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！