Show div on hover but make it click-through

Question

I am working on a music player. Here is the live version: http://users.metropolia.fi/~natalisu/minispotify/#

I am using this audio visualizer as the music player base: https://github.com/DavidLazic/audio-visualizer 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).

However, the click event of the music player is bound to the canvas element underneath the play icon. As such:

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

I have tried binding a :hover function to the canvas, like so:

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

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

But this does not work. The play button does not appear at all. Binding it to any other div does not help either.

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:

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

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 pointer-events: none; but this disabled both the hovering AND clicking on the album cover.

I also had a shot at doing it with jQuery but nothing worked. I tried this: Click through div which was closest to the solution I suppose but I could not get it to work.

Thanks a lot!

score 0 · Answer 1 · answered Sep 22 '17 at 13:55

0

add "z-index" property to .playcircle

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

answered Sep 22 '17 at 13:55

vnt

611
6
13

Hi! Thank you, this works in a way but because of the z-index, clicking on the player no longer pauses or plays the music. This is my issue because the click is bound to the – ariaofsorrow Sep 22 '17 at 14:01
@Koenshi: why don't you bind click (play/pause) event to "playbtn"? It makes more sense, doesn't it? – vnt Sep 22 '17 at 14:04
Because it is done in the javascript function which I did not write and I have no idea how to do it without breaking the entire player. – ariaofsorrow Sep 22 '17 at 14:06
so you need to add this: $('.playbtn').click(function() {$('#myCanvas').trigger('click')}); – vnt Sep 22 '17 at 14:19
I cannot believe it was that easy - I tried so many things. Thanks so much!! – ariaofsorrow Sep 22 '17 at 14:35

Show div on hover but make it click-through

1 Answers1