javascript - JQuery 在 HTML 列表上动态使用鼠标悬停

Question

如果我没有以最好的方式表达标题，我很抱歉，但这是我试图解决的问题。我有一个音频播放器，可以让您从列表索引中选择歌曲。有了那个索引，我也有一个描述，当你点击这首歌时会弹出。我希望将其转换为悬停状态，以便每当列表中的任何歌曲悬停时，都会出现描述，当您将鼠标移开时，它也会消失。

JS -

function audioPlayer(){
        var descriptions = ["Sad Man's Tongue. . .Description to follow",
        "Breed. . .Description to follow",
        "Everything Zen. . .Description to follow",
        "Ain't It Funky Now Pt2. . .Description to follow",
        "Killing All The Joy. . .Description to follow",
        "OWS. . .Description to follow",
        "X1 Alpha. . .Description to follow",
        "Low. . .Description to follow",
        "Reconsider Baby. . .Description to follow",
        "4Lee. . .Description to follow",
        "Show Biz Kids. . .Description to follow"
    ];

        var currentSong = 0;
        $("#audioPlayer")[0].src = $("#playlist li a")[0];
        $("#playlist li a").click(function(e){
            e.preventDefault();
            $("#audioPlayer")[0].src = this;
            $("#audioPlayer")[0].play();
            $("#playlist li").removeClass("current-song");
            currentSong = $(this).parent().index();
            $(this).parent().addClass("current-song");
            let currentDescription = descriptions[currentSong]
            $('#song-info').css('display', 'inline');
            $('#song-info').text(currentDescription);
         });

    $("#audioPlayer")[0].addEventListener("ended", function(){
  $("#playlist li").removeClass("current-song");
        $('#song-info').css('display', 'inline');
        $('#song-info').text("Time for the next song ...turn it up LOUDER");
        $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
        $("#audioPlayer")[0].play;
    });

    $("#audioPlayer")[0].addEventListener("mouseover", function(){
        let hoverDescription = description[$(this).index()];
        document.getElementById("song-hover-info").style.zIndex = "11";
        $('#song-hover-info').css('display', 'inline');
        $('#song-hover-info').text(hoverDescription);
    });
    $("#audioPlayer")[0].addEventListener("mouseleave", function(){
        document.getElementById("song-hover-info").style.zIndex = "9";
    });

    }// JavaScript Document

CSS -

.current-song{
            color:aqua;
}
    .footer{
        position: fixed;
        text-align: center;
        bottom: 0px;
        width: 100%;
    }
    .blacktextbg{
        background-color: #000000;
    }
    #playlist{
        font-size: 24;
    }
    .fader{
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-size: 100% 100%;
        background-repeat : no-repeat;
    }
    #song-info{
        padding: 10px;
        color: black;
        background-color: white;
        border: black 2px;
        width: 25%;
        z-index: 10;

    }
    #song-hover-info{
        padding: 10px;
        color: black;
        background-color: white;
        border: black 2px;
        width: 25%;
        z-index: 9;
    }

相关的 HTML

<audio src="" controls id="audioPlayer">
    Sorry, your browser doesn't support html5!
</audio>
<ul id="playlist">
      <li><a href="sounds/Sad%20Mans%20Tongue.mp3"><span class="blacktextbg">Sad Man's Tongue</span></a></li>
    <li><a href="sounds/breed.mp3"><span class="blacktextbg">Breed</span></a></li>
    <!--<li><a href="sounds/creep.mp3">Creep</a></li>-->
    <li><a href="sounds/Everything%20Zen.mp3"><span class="blacktextbg">Everything Zen</span></a></li>
    <li><a href="sounds/Ain't%20It%20Funky%20Now%20Pt%202.mp3"><span class="blacktextbg">Ain't It Funky Now Pt 2</span></a></li>
    <!--<li><a href="sounds/once.mp3">Once</a></li>-->
    <li><a href="sounds/killing all the joy.mp3"><span class="blacktextbg">Killing All The Joy</span></a></li>
    <!--<li><a href="sounds/torn.mp3">Torn</a></li>
    <li><a href="sounds/aftermidnight.mp3">After Midnight</a></li>-->
    <li><a href="sounds/X1BetaOWS.mp3"><span class="blacktextbg">OWS</span></a></li>
    <li><a href="sounds/X1 Alpha.mp3"><span class="blacktextbg">X1 Alpha</span></a></li>
    <!--<li><a href="sounds/undome.mp3">Undo Me</a></li>-->
    <li><a href="sounds/Low%20.mp3"><span class="blacktextbg">Low</span></a></li>
    <!--<li><a href="sounds/Cumbersome.mp3">Cumbersome</a></li>
    <li><a href="sounds/Thru%20Your%20Window%20.mp3">Thru Your Window</a></li>-->
    <li><a href="sounds/Reconsider%20Baby.mp3"><span class="blacktextbg">Reconsider Baby</span></a></li>
    <li><a href="sounds/4lee.mp3"><span class="blacktextbg">4LEE</span></a></li>
    <li><a href="sounds/show%20biz%20kids.mp3"><span class="blacktextbg">Show Biz Kids</span></a></li>
    <!--<li><a href="sounds/show%20biz%20guitar.mp3">Show Biz Guitar</a></li>
    <li><a href="sounds/Voodoo%20Child.mp3">Voodoo Child</a></li>
    <li><a href="sounds/saveme.mp3">Save Me</a></li>-->
</ul>
<script src="audioPlayer.js"></script>
<script>
    audioPlayer();
</script>
<div id="song-info">
    Select a song above and turn it up LOUD
</div>
<div id="song-hover-info">
</div>

数组 descriptions 包含单个歌曲的描述。

z-index 是因为我不想摆脱歌曲信息，它在歌曲结束后起到了作用。我希望在悬停时显示悬停信息，所以这是我想到的第一个解决方案。

Answer 1

如果您的 UL LI html 语法是用户将悬停在您的代码区域，则下面的代码应该使您能够检测何时有人将鼠标悬停在您的 LI 元素上。

$('#playlist').on({ 
    mouseenter: function() { 
        alert('mouseenter - hovered'); 
    }, 
    mouseleave: function() {
        alert('mouseleave - no hover');
    }
}, 'li');