Javascript jQuery在菜单悬停时添加透明覆盖

我正试图重现所发现的效果

当鼠标悬停在mega menu li>a元素上时，我假设页面包装上的背景/不透明度会发生变化，但我不确定使用jQuery实现这一点的最佳方法

我应该使用css来更改背景或不透明度，还是使用jQuery本身来尝试重新创建这种效果

---

任何指针都将不胜感激。

您不需要Javascript来完成此任务：）

在li的内部子级上使用

position:fixed

，如下所示：

<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;
}