Javascript 在菜单悬停时淡入网站背景

你会在下面的链接上看到，如果你与主菜单系统交互，那么网站的主体就会产生过渡效果

这叫什么？如何在网站中实现它？

下面是一个简单的例子来说明这个概念

基本HTML：

CSS:

---

你可以用悬停或不透明的背景图像来完成，这叫做页面接管。基本上，您有一个div，它以透明的背景色覆盖页面的所有正文内容。默认情况下，div是隐藏的，当有人将鼠标悬停在菜单项上时，它会被切换为显示。不确定这是否正是您链接的网站所做的，但这是一种方式。您有任何示例代码说明如何实现此功能，谢谢？这应该让您开始：完美工作非常感谢

<div class="overlay"></div>
<div class="menu">menu menu menu</div>
<h1>headline</h1>
<p>hello there, I am page content</p>

$(function() {
    $('.menu').on('mouseover', function() {
        $('.overlay').show();  //show overlay when menu hovered
    });
    $('.menu').on('mouseout', function() {
        $('.overlay').hide();   //hide overlay when cursor leaves menu
    });
});

.menu {
    width: 100%;
    background: #001fa4;
    color: #fff;
    height: 30px;
    z-index: 200;
    position: relative;
}
.overlay {
    position: absolute;
    display: none;   //overlay element is hidden until jquery shows it
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;   //absolutely position element covers entire page
    background: #939598;
    opacity: .5;
    z-index: 100;
}