Question

经过一段时间的搜索后，我在这里发现了一些相似的主题，但是没有一个与我的情况相同，所以我决定问。

当我将鼠标悬停在标签上时，我得到了这个下拉菜单，其高度为460px，并在未打开时丢失高度。即使鼠标从标签移动到菜单，我也需要菜单才能保留在那里。

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

当我尝试将位置设置为绝对位置时，菜单将不会在悬停时保持460px高度，它仅在标签悬停时具有高度。我还尝试了一些其他的东西，如将所有html包装在容器中，并将其作为mouseleave元素，但没有成功。如何让它留在标签和菜单上？

HTML

SELECT tm.CustomerID                          AS CustomerID,
       COALESCE(tb.FinishTime, tm.FinishTime) AS FinishTime,
       COALESCE(ta.StartTime, tm.StartTime)  AS StartTime
FROM   TableMain tm
       LEFT JOIN TableB tb
              ON tm.CustomerID = tb.CustomerID
                 AND tb.Date = '2016-10-14'
       LEFT JOIN TableA ta
              ON tm.CustomerID = ta.CustomerID
                 AND ta.Date = '2016-10-14'
WHERE  tm.day_of_week = 'SATURDAY'

JS

 <div id="tab">

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

            <div id="menuDropdown">

                <div id="innerDropdown">

                    <!-- menu content -->

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

CSS

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

Answer 1

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

.description {
    position: absolute;
}

请参阅演示：http://jsfiddle.net/4tb29u6h/1/

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

1 个答案: