Эффект размытия с помощью css на всех div ниже

У меня есть серия div, и я хотел бы размыть все лежащие в основе div; к сожалению, единственное, что я получаю, это размыть первый div, чей класс имеет эффект размытия

Я хотел бы, чтобы привет, мир размывался, когда я нажимаю кнопку; этого не происходит, на самом деле когда я нажимаю кнопку слово hello world остается без изменений

function on() {
  var x = document.getElementsByClassName("overlay");
  var y = document.getElementsByClassName("blur");
  if ((x[0].style.display === "none") && (y[0].style.display === "none")) {
    x[0].style.display = "block";
    y[0].style.display = "block";
  } else {
    x[0].style.display = "none";
    y[0].style.display = "none";
  }
}

body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  width: 800px;
  height: 600px;
}

.blur {
  display: none;
  position: absolute;
  width: 800px;
  height: 600px;
  background-color: rgba(44, 44, 27, 0.527);
  filter: blur(8px);
  z-index: 1;
}

.testo {
  position: absolute;
  top: 82%;
  left: 25%;
  right: 25%;
  z-index: 1;
}

.overlay {
  position: absolute;
  display: none;
  width: 35%;
  height: 42%;
  top: 28%;
  left: 25%;
  right: 25%;
  bottom: 20%;
  background-color: #ffb87d;
  z-index: 2;
  cursor: pointer;
}

.button {
  background-color: rgb(255, 127, 80);
  padding: 24px;
  color: rgb(255, 255, 255);
  border-radius: 15px 15px;
}

.tocco {
  display: block;
  border: solid 4px;
  position: absolute;
  width: 800px;
  height: 600px;
  z-index: 2;
}

<!DOCTYPE html>
<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <div class = "tocco">
    <div class = "testo">
      <H1> Hello world! </H1>
    </div>
    <!-- testo -->
    <H3> tocco </H3>
    <div>
      <button class='button' onclick='on()'> Lancia </button>
    </div>
    <div class = "overlay">
      <p> Numero primo </p>
    </div>
    <!-- overlay -->
  </div>
  <!-- tocco -->
  <div class = "blur">
  </div>

</body>

</html>

Я бы посоветовал иметь в .blur css только следующее свойство: filter: blur(8px). Все остальные свойства, т.е. width, height и т. д. не имеют ничего общего с размытием элемента. Добавьте эти свойства в другой класс.

— 19.06.2019 09:38

Что вы имеете в виду под «всем базовым div»? Все детские разделы .tocco?

— 19.06.2019 09:40

Если мой ответ правильный, не могли бы вы принять его

— 19.06.2019 11:13

javascript html css

19.06.2019 09:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

227

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, что я сделал, так это дал «Hello World» идентификатор, и когда вы нажмете на кнопку, он размоется. И если вы нажмете второй раз, он вернется в нормальное состояние.

function on() {
  var x = document.getElementsByClassName("overlay");
  var y = document.getElementsByClassName("blur");
  if ((x[0].style.display === "none") && (y[0].style.display === "none")) {
    x[0].style.display = "block";
    y[0].style.display = "block";
    document.getElementById("test").style.filter= "blur(8px)";
   
  } else {
    x[0].style.display = "none";
    y[0].style.display = "none";
    document.getElementById("test").style.filter= "blur(0px)";
  }
}

body {
  background-color: white;
  text-align: center;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  width: 800px;
  height: 600px;
}

.blur {
  display: none;
  position: absolute;
  width: 800px;
  height: 600px;
  background-color: rgba(44, 44, 27, 0.527);
  filter: blur(8px);
  z-index: 1;
}

.testo {
  position: absolute;
  top: 82%;
  left: 25%;
  right: 25%;
  z-index: 1;
}

.overlay {
  position: absolute;
  display: none;
  width: 35%;
  height: 42%;
  top: 28%;
  left: 25%;
  right: 25%;
  bottom: 20%;
  background-color: #ffb87d;
  z-index: 2;
  cursor: pointer;
}

.button {
  background-color: rgb(255, 127, 80);
  padding: 24px;
  color: rgb(255, 255, 255);
  border-radius: 15px 15px;
}

.tocco {
  display: block;
  border: solid 4px;
  position: absolute;
  width: 800px;
  height: 600px;
  z-index: 2;
}

<!DOCTYPE html>
<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <div class = "tocco">
    <div class = "testo">
      <H1 id = "test"> Hello world! </H1>
    </div>
    <!-- testo -->
    <H3> tocco </H3>
    <div>
      <button class='button' onclick='on()'> Lancia </button>
    </div>
    <div class = "overlay">
      <p> Numero primo </p>
    </div>
    <!-- overlay -->
  </div>
  <!-- tocco -->
  <div class = "blur">
  </div>

</body>

</html>

Я пришел к решению другим способом, но ваше решение определенно лучше, большое спасибо! Другое дело: почему я должен дважды нажать на кнопку, чтобы активировать эффект? по крайней мере первый раз... можно ли его сразу эксплуатировать?

— 21.06.2019 10:21

19.06.2019 09:48