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

Question

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

Answer 1

示例 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>