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>

我尝试将a：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 to .playcircle来实现它的工作，我认为 - 导致图标出现，但它没有点击，即我无法点击图标本身来启动音乐。我尝试通过应用pointer-events: none;来解决此问题，但这会禁用悬停和点击专辑封面。

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

非常感谢！

Answer 1

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

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

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

1 个答案: