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>

Answer 2

你可以选择这个。他们在javascript事件中使用mouseover执行此操作。当鼠标悬停在该特定链接上时，它会为该叠加div添加样式。

这是一个片段：

$("li a").on("mouseover", function(){
  $("#nav-cover").addClass("on");
}).on("mouseleave", function(){
  $("#nav-cover").removeClass("on");
})

#nav-cover.on {
    z-index: 1;
    height: 1899px;
    display: block;
    opacity: 0.6;
}

.links {
  position: relative;
  z-index: 6;
}

li {
  list-style: none;
}
.links a {
  display: inline-block;
  height: 30px;
  background-color: #fff;
}

#nav-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: #000;
    -ms-filter: opacity(.6);
    filter: alpha(opacity=60);
    -webkit-opacity: .6;
    -moz-opacity: .6;
    -o-opacity: .6;
    opacity: .6;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    z-index: 4;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="links">
  <ul>
    <li><a href="#">Hover Link</a></li>
  </ul>
</div>

<div id="nav-cover"></div>

Answer 3

例如，对导航栏10进行Z索引。然后在Z-index为9时创建一个名为overlay的div。设置叠加层样式，使其rgba为（0,0,0,0.7）左右。然后在悬停时切换其可见性或显示。这是一个例子：

下面是代码：

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

示例在这里：https://jsfiddle.net/y5gwo230/

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

3 个答案: