javascript - 如何在悬停另一个 div 时保持 div 可见

Question

我在这里找了好久发现了几个类似的帖子，但是没有一个和我情况一样，所以我决定问一下。

我得到这个下拉菜单，当我将鼠标悬停在选项卡上时，它的高度为 460 像素，当悬停时，高度会丢失。即使鼠标从选项卡移到菜单上，我也需要菜单保留在那里。

像这样:http://jsfiddle.net/muo4ypvc/

我可以通过将菜单位置设置为相对位置来完成此操作，但是我需要绝对位置才能调整 z-index。

当我尝试将位置设置为绝对位置时，菜单不会在悬停时保持 460 像素的高度，它只有在选项卡悬停时的高度。我还尝试了其他一些方法，比如将所有 html 包装在一个容器中，并将其作为 mouseleave 元素，但没有成功。我怎样才能让它同时停留在选项卡和菜单悬停上？

html

 <div id="tab">

        <a id="tab">Categories</a>

            <div id="menuDropdown">

                <div id="innerDropdown">

                    <!-- menu content -->

                </div>
            </div>
        </div>

js

$(document).ready(function() {

    var inner = $('#innerDropdown')
    var rolldown = $('#menuDropdown');

    $('#tab').mouseenter(function() {
        rolldown.toggleClass('show');

        if(rolldown.hasClass('show'));
            setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */

        function showInner(){
        inner.toggleClass('show');
        }
    });

$('#tab').mouseleave(function() {
        inner.toggleClass('show');
        rolldown.toggleClass('show');
    });
}); 

CSS

#menuDropdown {
  position: absolute;
  transition: (some long ass transition code);  
}

#menuDropdown.show {
    height: 460px;
}

#menuDropdown.hide {
    height: 0px;
}

#innerDropdown.show {
    display: block;
    animation: fadein .15s;
}

Answer 1

我将您的 html 包装到另一个 div 中以显示包装器保持其高度，但我不确定我是否理解您正在尝试做什么以及什么不起作用。我基本上只是添加了 position: absolute:

.description {
    position: absolute;
}

查看演示:http://jsfiddle.net/4tb29u6h/1/