悬停下拉菜单时，如何使用半透明覆盖使内容变暗？

问题描述

我是编程新手，目前正在处理我的作品集。我创建了一个下拉列表，当用户将鼠标悬停在它上面时会出现该下拉列表。一旦出现，我想让网站的其余部分变暗，以便下拉列表可以从其余部分中脱颖而出。

我正在尝试使用 body::after 伪类，它可以工作，但当我将鼠标悬停在下拉菜单上时就不行了，所以我一定是做错了什么。有人可以帮我吗？

下拉列表的类为 .dropdown

  body::after {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  background-color: black;
  opacity: 0;
  z-index: -1;
}

 .dropdown:hover body::after {
  opacity: 0.5;
}

链接到我的项目，以防万一： https://annaxt.github.io/product_landing_page/plant_store.html

谢谢！

解决方法

您可以将叠加层添加为它自己的元素，然后使用 JavaScript 控制不透明度。您想要在其上方显示的所有内容都需要具有高于您在叠加层上设置的 z-index，并且会受叠加层影响的所有内容都应具有较低的 z-index（默认值为 0）。>

let overlay = document.getElementById("overlay");
function showOverlay() {
  overlay.style.zindex = 9;
  overlay.style.opacity = 0.3;
}

function hideOverlay() {
  overlay.style.zindex = -1;
  overlay.style.opacity = 0;
}

#overlay {
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: black;
  opacity: 0;
  z-index: -1;
  transition: opacity .8s;
}

.dropdown {
  font-size: 50px;
  background: #369;
  color: white;
  font-family: sans-serif;
}

<body>
  <div class="dropdown" onmouseout="hideOverlay()" onmouseover="showOverlay()">Hover me</div>
  <div id="overlay" />
</body>

我不确定我们是否可以用 css 来做到这一点。但是您想要实现的目标可以通过 js 轻松完成。下面是帮助你的代码。

$(document).ready(function() {
  $(".dropdown").mouseenter(function() {
    $("body").addClass("open");
  });
  $(".dropdown").mouseleave(function() {
    $("body").removeClass("open");
  });
});

.main {
  display: flex;
}

.open {
  height: 100%;
  width: 100%;
  background: #232323;
  transition:.5s;
}

.dropdown {
  background-color: #f5f5f5;
  height: 200px;
  width: 200px;
  margin-right: 15px;
  transition:.5s;
}
.main:hover .dropdown{
  filter:blur(1px);
}
.main:hover .dropdown:hover {
  background-color: red;
  filter:blur(0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<div class="main">
  <div class="dropdown">
    dropdown1
  </div>
  <div class="dropdown">
    dropdown2
  </div>
  <div class="dropdown">
    dropdown3
  </div>
  <div class="dropdown">
    dropdown4
  </div>
  </div>
</body>

html javascript