jQuery在菜單懸停上添加透明覆蓋

Question

我正在嘗試重新創建在這里找到的效果

當我將鼠標懸停在大型菜單li>元素上時，背景/不透明度會隨着頁面包裝器的變化而變化，但是我不確定用jQuery實現此效果的最佳方法。

我應該使用css更改背景或不透明度還是使用jQuery本身來嘗試重新創建此效果。

任何指針將不勝感激。

Answer 1

您不需要Java語言即可完成此操作：）

使用position: fixed在您的li內子上，如下所示：

<li>
   <a href="#"></a>
   <div class="overlay"></div>
</li>

和..

.overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

li:hover .overlay {
   display: block;
}

示例： http ： //jsfiddle.net/serb4q2v/