如何在鼠标悬停时显示播放器

Question

我的html中嵌入了一个soundcloud播放器，我将它放在屏幕底部的固定位置，并在10秒后设置为消失。当鼠标悬停在屏幕底部时，我试图让玩家重新出现（好像有一个不可见的div固定在屏幕上）但这不起作用。如何让鼠标悬停在屏幕底部重新出现？

<!-- section to hover over to make Player visible -->

<div class="hover" align="center" id=‘a’ style="color:#3498db">
<style>   
div.hover{
    position: fixed;
    height: 1000px;
    bottom: 0;
    right: 0;
    width: 100%;
    ;
}

#b {
    display: none;
}

#content:hover~#b{
    display: block;
}
</style>
</div> 
<!-- Soundcloud player and view code -->
<div class="fixed" align="center" id='b'>
<!--Player -->
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/11450645&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

<!-- fixed position code -->
<style>
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    ;
}
<!-- Player hides after x seconds -->
div.fixed {
    -webkit-animation: cssAnimation 0s ease-in 10s forwards;
    -moz-animation: cssAnimation 0s ease-in 10s forwards;
    -o-animation: cssAnimation 0s ease-in 10s forwards;
    animation: cssAnimation 0s ease-in 10s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    from {
        visibility:hidden;
    }
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    from {
        visibility:hidden;
    }
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}


</style>  
    
<!-- End of Soundcloud code -->
</div>

Answer 1

做你说的话......

HTML

<div id="invisible"></div>
<div id="music-player"></div>

CSS

#invisible {
  width: 100vw;
  height: however-tall-or-small-you-want-it-to-be;
  transition: opacity 1s;
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
  opacity: 0;
}

#music-player {
  opacity: 0;
}

JS

  var i = document.getElementById('invisible');
  var p = document.getElementById('music-player');
  i.addEventListener('mouseenter', showMusicPlayer);
  function showMusicPlayer(){
    p.style.opacity = '1';
  }

您也可以简单地使用JS光标坐标，并编写一个函数来确定您想要的边界的特定坐标，并在光标落在这些边界内时显示音乐播放器。