javascript - 在下面的所有 div 上使用 css 模糊效果
问题描述
我有一系列 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>
推荐阅读
- typescript - 在 TypeScript 中获取数组中未知数量对象的类型交集
- pandas - 在 Jupyter Notebook vs Script 中切掉 pandas 行
- node.js - 使用 1 个单端口的 Node.js express 和 net socket
- javascript - JSON在反应中没有正确处理并且没有保存在状态中
- css - 关键帧动画意外令牌错误的问题
- python - 当通过 APIView 类请求 GET 方法时,如何从 API 响应中删除 \n 或以适当的 JSON 格式获取响应
- arrays - 如何在结构中打印无符号字符数组的内容?
- java - 如何在 Android 上水平居中 ListPopupWindow/Other 视图?
- typescript - 对象可能为空。打字稿错误
- reactjs - Create-react-app 从终端启动,但不是 vs-code