使用播放按鈕隱藏圖像

Question

播放按鈕的圖片在我點擊的時候隱藏了，我怎么也隱藏綠色的圖片？

這就是我想在代碼中做的所有事情。

點擊播放圖片后隱藏綠色圖片。

目前只有播放圖隱藏，點擊播放圖后怎么隱藏綠色圖？

https://jsfiddle.net/075anu3x/

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

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
  };
}());

Answer 1

也許你可以嘗試添加background: unset; to.video-wrapper.slide::在 class 之后

Answer 2

對於您的問題，將帶有按鈕的綠色背景作為同一組件更容易。

綠色背景跑不掉的原因：在video-wrapper下設置為偽類以我的經驗，javascript是達不到偽類的，即使可以，也會讓你的代碼超級混亂，難以閱讀和遵循。

建議：去掉video wrapper class的綠色背景，移到按鈕上。 看這里

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

.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;
}