在悬停时显示 div，但使其点击

Question

我正在开发音乐播放器。 这是现场版：http://users.metropolia.fi/~natalisu/minispotify/#

我正在将此音频可视化器用作音乐播放器基础：https://github.com/DavidLazic/audio-visualizer，并且我正在尝试根据我的需要对其进行自定义。我想要实现的是当用户将鼠标悬停在专辑图像（音乐播放器）上时会出现一个播放图标。

但是，音乐播放器的点击事件绑定到播放图标下方的画布元素。因此：

<div class="playcircle">
    <i class="playbtn fa fa-play fa-4x"></i>
    <img class="albumcover" src="summer.jpg" alt="Card image cap ">
</div>

<div class="vz-wrapper">
    <audio src="summer.mp3" controls id="myAudio"></audio>
    <div class="vz-wrapper -canvas">
        <canvas id="myCanvas" width="550px" height="420px"></canvas>
    </div>
</div>

我尝试将 :hover 函数绑定到画布，如下所示：

.playbtn {
    opacity: 0;
    position: absolute;
    top: 0.9em;
    left: 1.1em;
}

#myCanvas:hover .playbtn {
    opacity: 1;
}

但这不起作用。播放按钮根本不出现。将它绑定到任何其他 div 也无济于事。

重要的一点是，用户应该能够在开始播放音乐时点击专辑封面上的任意位置。音乐播放器有自己的绑定点击事件的功能，我尽量不更改任何代码，因为它很容易导致播放器不再工作，这肯定会让事情变得更难。这是函数：

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

我认为我通过将 :hover 绑定到 .playcircle 让它在某个时候工作 - 这导致图标出现，但它不是点击通过，即我无法点击图标本身来启动音乐。我尝试通过应用pointer-events: none; 来解决此问题，但这禁用了悬停和单击专辑封面。

我也曾尝试用 jQuery 来做这件事，但没有任何效果。我试过这个：Click through div，它最接近我想的解决方案，但我无法让它工作。

非常感谢！

Answer 1

将“z-index”属性添加到 .playcircle

.playcircle {
    ...
    z-index: 100;
}