javascript - 最初隐藏播放按钮

Question

如何在查看封面图片时隐藏播放按钮，并在您点击图片后显示它？

我一直在尝试不同的方法，但似乎无法得到它。

完整代码:

https://jsfiddle.net/0yxvpa09/12/

点击图片显示网格

Screenshot

<div class="playButton ">

  <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

Answer 1

(function iife() {
  "use strict";

  function hideClickedElement(evt) {
    var target = evt.target;
    target.classList.add("hide");
    document.querySelector(".test").classList.remove("hide");
    document.querySelector(".playButton").classList.remove("hide");
  }
  document.querySelector(".playButton").classList.add("hide");
  var cover = document.querySelector(".cover");
  cover.addEventListener("click", hideClickedElement, false);
}());

  .cover {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  }
  
  a.x1 {
    margin: 0
  }
  
  a.x2 {
    margin-left: 54px
  }
  
  a.x3 {
    margin-left: 108px
  }
  
  a.x4 {
    margin-left: 162px
  }
  
  a.x5 {
    margin-left: 216px
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }
  .playButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
    margin: -112px 0 0 108px;
  }
  
  .playButton.playing {
    background-color: #000000;
  }

<div class="cover">Links</div>
<div class="test hide">

  <div class="links    ">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>

      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>


<div class="playButton ">

  <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>
</div>

使用类 hide 隐藏播放按钮 div onload。然后点击封面元素将其删除。