保持懸停元素

Question

我試圖隱藏我的主菜單和標誌後面的主要內容，並有主要內容下推，並顯示標題時，用戶懸停在頁面的頂部附近。

我可以得到所有的內容，推下懸停，然後回滾時，當用戶離開懸停區域。但是有一些已經開始發揮作用，兩個問題，我無法弄清楚如何解決：

1. 如何獲得徽標點擊時它所在的覆蓋之下
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'); 
    } 
); 

徽標鏈接不可點擊，因爲#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/

Answer 2

嘗試使用.appendTo()

$('#menu-toggle').hover(
    function() { 
     $(".logo a").appendTo(this); 
     $('#main').addClass('is-active'); 
    }, 
    function() { 
     $(this).find("a").appendTo(".logo"); 
     $('#main').removeClass('is-active'); 

    } 
); 

的jsfiddle https://jsfiddle.net/wxu21eLb/4/