Как сделать, чтобы при наведении на меню остальная область затемнялась?

#html #jquery #css

Как сделать затемнение всего окна сайта, когда наводишь курсор на меню?
    

Ответы

Ответ 1

Можно обойтись в данном случае без JavaScript и использовать box-shadow с "бесконечной
тенью" (длиной 100vmax). Так как IE не распознаёт единицы vmax ему даётся fallback
(запасной вариант) c огромной величиной 99999px вместо 100vmax. При необходимости для
самого меню на псевдокласс :hover можно добавить также background-color того же цвета,
что и затемнение. Демонстрация:



body {
  margin: 0;
  height: 100vh;
}

.nav {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
  padding: 50px 0;
  margin: auto;
}

.nav__item {
  list-style: none;
  border: 1px solid #000;
  padding: 10px 15px;
  background: #fff;
  color: #000;
}

.nav:hover {
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5); /* fallback for IE */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
}

  
пункт 1
  
пункт 2
  
пункт 3



Ответ 2

var wrap = document.querySelector(".wrap");
var colorHover = "rgba(0,0,0, .5)";
var colorUnHover = "#fff";

var items  = document.querySelectorAll(".nav__item");

items.forEach(function(item) {
  item.onmouseover = function() {
    wrap.style.background = colorHover;
  }

  item.onmouseleave = function() {
    wrap.style.background = colorUnHover;
  }
});
html,body {
  margin: 0;
  padding: 0;
}

.wrap {
  height: 100vh;
  width: 100vw;
  transition: .5s;
}

.nav {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
  padding: 50px 0;
  margin: auto;
}

.nav__item {
  list-style: none;
  border: 1px solid #000;
  padding: 10px 15px;
  background: #fff;
  color: #000;
}

  

    
пункт 1
    
пункт 2
    
пункт 3