[英]Hide image with play button
The play button image hides when I click it, how do I also have the green image hide?播放按钮的图片在我点击的时候隐藏了,我怎么也隐藏绿色的图片?
That is all I am trying to do in the code.这就是我想在代码中做的所有事情。
Hide the green image after the play image is clicked.点击播放图片后隐藏绿色图片。
Currently only the play image hides, how to I have the green image hide aftr the play image is clicked?目前只有播放图隐藏,点击播放图后怎么隐藏绿色图?
https://jsfiddle.net/075anu3x/ https://jsfiddle.net/075anu3x/
css green image css绿色图像
.video-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
javascript javascript
const manageCover = (function makeManageCover() {
const events = {};
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function fadeVideoIn(cover) {
hide(cover);
const videoWrapper = document.querySelector(".video-wrapper");
videoWrapper.classList.add("slide");
return videoWrapper;
}
function showVideo(videoWrapper) {
const thewrap = videoWrapper.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const videoWrapper = fadeVideoIn(cover);
showVideo(videoWrapper);
cover.dispatchEvent(events.afterClickCover);
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
events.afterClickCover = new Event("afterClickCover");
cover.addEventListener("afterClickCover", callback);
}
return {
init
};
}());
maybe you can try add background: unset;
也许你可以尝试添加background: unset;
to.video-wrapper.slide::after class to.video-wrapper.slide::在 class 之后
for your issue, it is easier to make the green background with the button as the same component.对于您的问题,将带有按钮的绿色背景作为同一组件更容易。
The reason why the green background doesn't get away: It is set up as a pseudo-class under video-wrapper In my experience, javascript can't reach a pseudo-class, even if it is possible, it will make your code super messy and hard to read and follow.绿色背景跑不掉的原因:在video-wrapper下设置为伪类以我的经验,javascript是达不到伪类的,即使可以,也会让你的代码超级混乱,难以阅读和遵循。
Suggestion: Remove the green background from the video wrapper class and move it to the button.建议:去掉video wrapper class的绿色背景,移到按钮上。 See here看这里
HTML HTML
<div class="container">
<div class="video-wrapper">
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame"></div>
</div>
</div>
</div>
<div class="play">
<button type="button" aria-label="Open"></button>
</div>
</div>
CSS CSS
.play {
position: relative;
width: 100vw;
height: 100vh;
}
.play button {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
animation: rotate 700ms linear forwards;
border-color: red transparent red transparent;
}
.play::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #333;
pointer-events: none;
background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
background-size: contain;
background-position: center;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
99.9% {
border-color: red transparent red transparent;
pointer-events: none;
}
100% {
transform: rotate(360deg);
border-color: blue;
}
}
.play button:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.play button:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.play button::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
animation: triangle 700ms linear forwards;
}
@keyframes triangle {
0% {
opacity: 0;
}
99.9% {
opacity: 0;
}
100% {
border-left-color: blue;
opacity: 1;
}
}
.hide {
display: none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.