絕對定位元素上的Mouseenter事件

Question

我正在創建一個菜單，它將會有幾層深度。我的意圖是使用幾個嵌套的UL和LI元素來製作這個結構。當我將鼠標懸停在某個LI元素上時，它顯示該菜單項的下一級導航。但是，當我嘗試將鼠標移動到該元素時，它會自動向我顯示最終菜單項的子項。

<div class="menu"> 
    <ul> 
     <li><a>First</a> 
      <ul> 
       <li><a>Child of First</a></li> 
       <li><a>Child of First</a></li> 
      </ul> 
     </li> 
     <li><a>Second</a> 
      <ul> 
       <li><a>Child of Second</a></li> 
       <li><a>Child of Second</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<style> 
    .headerMenu ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     width: 50%; 
     background: black; 
     color: white; 
    } 

    .headerMenu ul ul { 
     position: absolute; 
     top: 0; 
     width: 0; 
     left: 50%; 
     opacity: 0; 
    } 

    .headerMenu ul ul.visibleSub { 
     width: 100%; 
     opacity: 1; 
    } 
</style> 

<script> 
    $(document).ready(function() { 
     var $ul = $('.headerMenu ul'); 

     $ul.find('li').on({ 
      mouseenter: function() { 
       $(this).find('ul').first().addClass('visibleSub'); 
      }, 
      mouseleave: function() { 
       $(this).find('ul').first().removeClass('visibleSub'); 
      } 
     }); 
    }); 
</script> 

你可以看到和演示在https://codepen.io/pcasagrande/pen/RZqQwO

Answer 1

只需添加的z-index：-1 unvisible UL：

.menu ul ul { 
     position: absolute; 
     top: 0; 
     width: 0; 
     left: 50%; 
     opacity: 0; 
     z-index: -1; 
    } 
    .menu ul li:hover > ul{ 
     opacity: 1; 
     width: 100%; 
     z-index: 1; 
    } 

也如我上面提到你能避免jQuery和純CSS做到這一點。 你也可以爲.menu ul ul{ transition: .2s}添加一些轉換，它會有一些簡單的動畫。

Answer 2

的非常精簡的代碼，它是您使用opacity隱藏菜單的第二層的事實。他們仍然在那裏，當你在那裏移動時，你將鼠標懸停在第二組上，所以它變得可見。如果您使用display來真正隱藏第二層，它將起作用。將您的CSS更改爲：

.menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    background: black; 
    color: white; 
} 

.menu ul ul { 
    display: none;  
    position: absolute; 
    top: 0; 
    width: 0; 
    left: 50%; 
} 

.menu ul ul.visibleSub { 
    width: 100%; 
    display: block; 
} 

沒有其他需要更改。

Answer 3

如果你不需要動畫，你可以因爲在代碼中使用的display: hidden代替opacity: 0

，雖然第二級li a鏈接是不可見的，他們有填充/保證金，右邊實際佔用空間第一級ul的一面。

https://codepen.io/anon/pen/prQapW