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/