title: Show div on hover but make it click-through
body: <p>I am working on a music player.
  Here is the live version: <a href="http://users.metropolia.fi/~natalisu/minispotify/#" rel="nofollow noreferrer">http://users.metropolia.fi/~natalisu/minispotify/#</a></p>
  
  <p>I am using this audio visualizer as the music player base: <a href="https://github.com/DavidLazic/audio-visualizer" rel="nofollow noreferrer">https://github.com/DavidLazic/audio-visualizer</a> and I am trying to customize it to my needs. What I would like to achieve is a play icon that would appear when the user would hover on top of the album image (the music player).</p>
  
  <p>However, the click event of the music player is bound to the canvas element underneath the play icon. As such:</p>
  
  <pre><code>&lt;div class="playcircle"&gt;
      &lt;i class="playbtn fa fa-play fa-4x"&gt;&lt;/i&gt;
      &lt;img class="albumcover" src="summer.jpg" alt="Card image cap "&gt;
  &lt;/div&gt;
  
  &lt;div class="vz-wrapper"&gt;
      &lt;audio src="summer.mp3" controls id="myAudio"&gt;&lt;/audio&gt;
      &lt;div class="vz-wrapper -canvas"&gt;
          &lt;canvas id="myCanvas" width="550px" height="420px"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried binding a :hover function to the canvas, like so:</p>
  
  <pre><code>.playbtn {
      opacity: 0;
      position: absolute;
      top: 0.9em;
      left: 1.1em;
  }
  
  #myCanvas:hover .playbtn {
      opacity: 1;
  }
  </code></pre>
  
  <p>But this does not work. The play button does not appear at all. Binding it to any other div does not help either.</p>
  
  <p>The important point is that the user is supposed to be able to click on anywhere on the album cover as it starts the music. The music player has its own function for binding click events and I have tried not to change any of the code as it would easily result in the player not working at all anymore, which certainly makes things harder. Here is the function:</p>
  
  <pre><code>Visualizer.prototype.bindEvents = function () {
      var _this = this;
  
      document.addEventListener('click', function (e) {
          if (e.target === _this.canvas) {
              e.stopPropagation();
              if (!_this.isPlaying) {
                  return (_this.ctx.state === 'suspended') ? _this.playSound() 
  : _this.loadSound();
              } else {
                  return _this.pauseSound();
              }
          }
      });
  
      if (_this.autoplay) {
          _this.loadSound();
      }
  
      return this;
  };
  </code></pre>
  
  <p>I got it to work at some point by binding the :hover to .playcircle I think - that resulted in the icon appearing, but it was not click-through i.e I could not click on the icon itself to start the music. I tried to fix this by applying <code>pointer-events: none;</code> but this disabled both the hovering AND clicking on the album cover.</p>
  
  <p>I also had a shot at doing it with jQuery but nothing worked. I tried this: <a href="https://stackoverflow.com/questions/18642247/click-through-div">Click through div</a> which was closest to the solution I suppose but I could not get it to work.</p>
  
  <p>Thanks a lot!</p>