How can I dim the content with a semitransparent overlay when hovering a dropdown menu?

Question

I'm new to programming and currently working on my portfolio. I've created a dropdown list that appears when a user hovers over it. Once it appears I want to make the rest of the website darker so the dropdown list can stand out from the rest.

I'm trying to use the body::after pseudo class for that and it works but not when I hover over the dropdown so I must be doing something wrong. Could anyone please help me?

The dropdown list has a class of .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;
}

Link to my project in case that helps: https://annaxt.github.io/product_landing_page/plant_store.html

Thank you!

Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — disinfor, Jul 29 '21 at 21:03

score 1 · Accepted Answer · answered Jul 29 '21 at 21:11

You could add the overlay as it's own element and then control the opacity using JavaScript. Everything you would want to show above it would need to have a z-index higher than what you're setting on the overlay and everything that would be affected by the overlay should have a lower z-index (default is 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>

This is probably the way to go, but might be helpful to explain the problem OP has with the `.dropdown:hover body::after` selector just to make it clear. — cjl750, Jul 29 '21 at 21:27

score 1 · Answer 2 · answered Jul 29 '21 at 21:30

I am not sure whether we can do this with css or not. but what you are trying to achieve can be easily done by js. Below is code to help you.

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

Thank you so much, it's actually way easier with JavaScript! — Anna, Jul 29 '21 at 21:55

How can I dim the content with a semitransparent overlay when hovering a dropdown menu?

2 Answers2