Wie man einen Player bei Maus-Hover erscheinen lässt

Question

Ich habe einen Soundcloud-Player in meinem HTML eingebettet und ich habe ihn in einer festen Position am unteren Rand des Bildschirms und eingestellt, um nach 10 Sekunden zu verschwinden. Ich versuche, den Player wieder erscheinen zu lassen, wenn die Maus über den unteren Bildschirmrand schwebt (als ob ein unsichtbares Div auf dem Bildschirm fixiert wäre). Aber das funktioniert nicht. Wie kann ich den Player wieder mit einem Mauszeiger auf den unteren Bildschirmrand erscheinen lassen?

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

Genau das tun, was Sie gesagt haben ...

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

könnten Sie auch einfach verwenden JS Cursor-Koordinaten und eine Funktion schreiben, die die jeweiligen Koordinaten der Grenze bestimmen, werden Sie sich wünschen, und den Musik-Player angezeigt werden, wenn der Cursor innerhalb dieser Grenzen fällt.