Javascript 当鼠标悬停在导航栏中的链接上时，如何使网页的其余部分变暗

在amazon.com上，当您将鼠标悬停在导航栏中有下拉菜单的链接上时，导航栏下方页面的其余部分会变暗或变暗。 我试着在谷歌上搜索，试图在主页的代码中找到答案，但它太完整了，不起作用，我也没有在谷歌上找到任何有用的东西。如果有人能找到答案，请共享一个JSFIDLE

示例html：

 <div id="nav"> some links </div>
 <div id="main"> main content</div>

一些链接
主要内容

js：

<script>
window.onload=function(){
    nav=document.getElementById("nav");
    main=document.getElementById("main");
    links= nav.document.getElementsByTagName("a");
    for(key=0; key<links.length;key++){
       link=links[key];
       link.onmouseover=function(){
          main.style.opacity=0.5;
       };
       link.onmouseout=function(){
         main.style.opacity=1;
       };
   }
 };
</script>

window.onload=function（）{
nav=document.getElementById（“nav”）；
main=document.getElementById（“main”）；
links=nav.document.getElementsByTagName（“a”）；
例如，对于（key=0；keyZ-index）导航栏10。然后在Z-index为9时创建一个名为overlay的div。设置overlay的样式，使其具有（0,0,0,0.7）左右的rgba。然后悬停，只需切换其可见性或显示。以下是一个示例：

代码如下：

<div id="content"></div>
<div id="navbar"></div>
<div id="overlay"></div>

<style>
#content {
 width: 600px;
 height: 300px;
 background-color: green;
 float: left;
}

#navbar {
 width: 600px;
 height: 100px;
 position: absolute;
 z-index: 9;
 background-color: blue;
}

#overlay {
 width: 600px;
 height: 300px;
 position: absolute;
 z-index: 9;
 visibility: hidden;
 background-color: rgba(0,0,0,0.7);
}   

#navbar:hover + #overlay {
 visibility: visible;
}

</style>


#内容{
宽度：600px；
高度：300px；
背景颜色：绿色；
浮动：左；
}
#导航栏{
宽度：600px；
高度：100px；
位置：绝对位置；
z指数：9；
背景颜色：蓝色；
}
#覆盖层{
宽度：600px；
高度：300px；
位置：绝对位置；
z指数：9；
可见性：隐藏；
背景色：rgba（0,0,0,0.7）；
}   
#导航栏：悬停+覆盖{
能见度：可见；
}

示例如下：
您可以选择此选项。他们使用
javascript
，在
mouseover
事件上执行此操作。当鼠标位于该特定链接上时，它会向覆盖div添加样式

以下是一个片段：


$（“LIA”）。在（“鼠标悬停”，函数（）上{
美元（“#资产净值保险”）.addClass（“on”）；
}).on（“mouseleave”，函数（）{
美元（“#导航盖”）。删除类（“on”）；
})
#nav-cover.on{
z指数：1；
高度：1899px；
显示：块；
不透明度：0.6；
}
.链接{
位置：相对位置；
z指数：6；
}
李{
列表样式：无；
}
.链接a{
显示：内联块；
高度：30px；
背景色：#fff；
}
#导航盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
背景色：#000；
-ms过滤器：不透明度（.6）；
过滤器：α（不透明度=60）；
-webkit不透明度：.6；
-moz不透明度：.6；
-o-不透明度：.6；
不透明度：.6；
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
-o变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
z指数：4；
}




制作一个暗背景和不透明：在主页上，我尝试用css类链接链接链接和页面的其余部分，但如果可以这样做，我无法确定JS就是为此而发明的。为什么不使用它呢？jsMine不是很好，它是一个纯css方法，非常有效，不需要JS或Jquery