下面的代码用于执行以下两次单击过程:
1.首先点击.imagenes使不透明下拉,和.标志可见.
1.第二次点击.imagenes返回其不透明度为1和.logo隐藏一次。
相反,它经历了两次点击循环,但.logo没有显示。你能找出原因吗?
'
const imagenes = document.querySelectorAll('.imagenes');
const logos = document.querySelectorAll('.logo');
imagenes.forEach((imagen, index) => {
let count = 0;
imagen.addEventListener('click', () => {
if (count % 2 == 0) {
imagen.style.opacity = 0.1;
logos[index].style.opacity = 1;
} else {
imagen.style.opacity = 1;
logos[index].style.opacity = 0;
}
count++;
});
});
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
.gridA {
display: grid;
width: 50%;
height: auto;
grid-gap: .5rem;
grid-auto-rows: minmax(auto, min-content);
grid-template-columns: 1fr;
margin-right: .25rem;
overflow: hidden;
}
.gridB {
display: grid;
width: 50%;
height: auto;
grid-gap: .5rem;
grid-auto-rows: minmax(auto, min-content);
grid-template-columns: 1fr;
margin-left: .25rem;
overflow: hidden;
}
img {
width: 100%;
height: auto; /*img use its full width leaving empty height space*/
object-fit: cover;
display: block; /*fill empty space remaining after adding img*/
max-height: 100%;
overflow: hidden;
}
#A, #B {
position: relative;
}
.logo {
position: absolute;
visibility: hidden;
top:0;
}
.youtube-link {
position: absolute;
top: 80%;
left: 39%;
width: 15%;
}
.video-link {
position: absolute;
top:100%;
width: 10%;
left: 44%;
}
.youtube-link2 {
position: absolute;
top: 75%;
left: 42%;
width: 15%;
}
.youtube-link2:hover {
opacity: .6;
}
.video-link:hover {
opacity: .6;
}
.youtube-link:hover {
opacity: .6;
}
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="gridA">
<div id ="A" class="box">
<div class="imagenes">
<img src="spotify-still.jpg">
</div>
<div class="logo">
<img id="Alog" src="Spotify Logo (PNG720p) - Vector69Com.png">
<a>
<a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
<img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
</a>
</a>
</div>
</div>
<div ID ="B" class="box">
<div class="imagenes">
<img src="audi-q3-1-by-marc-trautmann 2.jpg">
</div>
<div class="logo">
<img id="Blog" src="Audi_logo_PNG3.png">
</div>
</div>
</div>
<div class="gridB">
</div>
<script src="JS.js"></script>
</body>
</html>
2条答案
按热度按时间gpnt7bae1#
你只改变不透明度的一种方式,但你需要改变它回来的第二次点击。
让我们通过添加2个CSS类来简化此操作:
hide
和show
,它们具有opacity
、0
或1
。然后可以循环遍历所有
box
:把图片和标志放进盒子里:
在这里,我们可以添加一个
EventListener
,它将show
类与hide
进行replace()
,对于图像,反之亦然。然后为徽标添加另一个
EventListener
,它将恢复第一次单击时的操作注意:删除了链接+添加了占位符图像以获得更好的演示效果
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
xdnvmnnf2#
与
imagenes
不同的是,在logo
上,您使用的是包含空格的 pictures。您可以删除这些空格,也可以使用 * 字符 * 替换空格,这些字符通常是加号(
+
)或%20
。