如何讓玩家出現在鼠標懸停上

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光標座標，寫這將決定你想要的邊界的特定座標的功能，當光標落在這些邊界內顯示的音樂播放器。