jquery - 在悬停时保持元素打开

Question

我试图将我的主菜单和 Logo 隐藏在主要内容后面，并让主要内容下推并在用户悬停在页面顶部附近时显示标题。

我可以让所有内容在悬停时向下推，然后在用户离开悬停区域时向后滚动。但是，有两个问题已经开始发挥作用，我无法弄清楚如何解决:

1. 当 Logo 位于叠加层下方时如何使它可点击
2. 如何保持标题打开，以便在主导航位于叠加层下方时能够点击主导航。目前，当我尝试将鼠标悬停在导航项上时，内容会向上滚动。

所以我需要做的是能够点击叠加层下方的元素，并在我滚动到主导航区域时保持标题显示。

Here is the code and fiddle I have so far :

HTML:

<div id="uber">
<div id="menu-toggle">
    Menu toggle (hover over me)
</div>
<header class="l-header" id="header">
    <div class="logo">
        <a href="#">Logo needs to be clickable</a>
    </div>
    <nav class="navbar" id="main-navbar">
        <ul class="nav nav-justified">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </nav>
</header>
<div class="l-content-main" id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nibh id nulla placerat tincidunt sit amet vitae lectus. Vivamus porttitor sapien lorem, et condimentum dui posuere sed. Aliquam vestibulum varius posuere. Maecenas placerat nibh eu nulla lobortis scelerisque. Donec nec elit eget lorem viverra tincidunt. Nam dapibus augue arcu. Vivamus iaculis ornare velit facilisis gravida. Mauris nibh diam, ultricies in risus sit amet, fermentum blandit diam.</p>
    <p>Integer mollis varius felis, eu vehicula ante vestibulum eget. Nam consectetur eros sodales diam imperdiet, et sollicitudin ante fringilla. Pellentesque nec ligula et magna convallis sollicitudin a vel ante. Quisque tristique nec augue a fringilla. Nunc ultrices, lacus eget finibus eleifend, massa orci ultricies nisl, id fermentum nisl libero id turpis. In at ligula aliquet, interdum metus non, pretium diam. Sed in laoreet magna. Quisque at ipsum eget justo semper sodales at id augue. Maecenas massa ipsum, pharetra a aliquam eget, sollicitudin nec elit.</p>
</div>

JS:

$('#menu-toggle').hover(
    function() {
        $('#main').addClass('is-active');
    },
    function() {
        $('#main').removeClass('is-active');
    }
);

CSS:

#uber {
    position: relative;
}
#menu-toggle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    cursor: pointer;
    z-index: 20;
    background-color: #FFF;
    opacity: .5;
}
#header {
    padding-top: 30px;
    height: 110px;
    background-color: goldenrod;
    overflow: hidden;
}
.logo {
    width: 100%;
    height: 30px;
    text-align: center;
}
.logo a {
    padding-top: 10px;
    width: 100%;
    height: 20px;
}
.navbar ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    list-style: none;
}
.navbar li {
    margin: 0;
    padding: 0;
    float: left;
}
.navbar a {
    display: block;
    margin: 0;
    padding: 10px;
    height: 30px;
}
#main {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 80px 50px;
    background: lightgrey;
    -webkit-transition: all 300ms ease;
    -moz-transition:    all 300ms ease;
    -ms-transition:     all 300ms ease;
    -o-transition:      all 300ms ease;
    transition:         all 300ms ease;
    z-index: 10;
}
#main p {
    margin-top: 0;
    padding-top: 0;
}
#main.is-active {
    margin-top: 110px;
}

Answer 1

您可以将 #header 选择器添加到您的 jQuery 中，从而在您将鼠标悬停在任一 上时应用 is-active 类>#menu-toggle 或 #header。

$('#menu-toggle, #header').hover(
    function() {
        $('#main').addClass('is-active');
    },
    function() {
        $('#main').removeClass('is-active');
    }
);

Logo 链接不可点击，因为 #menu-toggle 覆盖了它。降低 div 的高度以使底层元素可用 - 25px 似乎可行。

#menu-toggle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 25px;
    cursor: pointer;
    z-index: 20;
    background-color: #FFF;
    opacity: .5;
}

在这里查看它的工作情况:https://jsfiddle.net/wxu21eLb/6/