我有一系列的 div，我想模糊所有底层的 div；不幸的是，我唯一得到的是模糊其类具有模糊效果的第一个 div
我希望 hello world 在我按下按钮时变得模糊； 这不会发生，事实上当我按下按钮时，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>最佳答案
所以我所做的是给“Hello World”一个 id，当你点击按钮时它会模糊。如果您点击第二次，它将恢复正常。
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>关于javascript - 在下面的所有 div 上使用 css 模糊效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56662275/