Javascript 如何使玩家在鼠标悬停时出现

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

悬停{
位置：固定；
高度：1000px；
底部：0；
右：0；
宽度：100%；
;
}
#b{
显示：无；
}
#内容：悬停~#b{
显示：块；
}
分区固定{
位置：固定；
底部：0；
右：0；
宽度：100%；
;
}
分区固定{
-webkit动画：cssAnimation 0秒轻松前进10秒；
-moz动画：cssAnimation 0秒，10秒前进；
-o型动画：cssAnimation 0秒，向前10秒；
动画：cssAnimation 0秒前进10秒；
-webkit动画填充模式：正向；
动画填充模式：正向；
}
@关键帧cssAnimation{
从{
可见性：隐藏；
}
到{
宽度：0；
身高：0；
可见性：隐藏；
}
}
@-webkit关键帧cssAnimation{
从{
可见性：隐藏；
}
到{
宽度：0；
身高：0；
可见性：隐藏；
}
}

照你说的做

HTML JS 您还可以简单地使用JS光标坐标，编写一个函数，确定所需边界的特定坐标，并在光标位于这些边界内时显示音乐播放器

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

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

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