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>

数组描述包含各个歌曲描述。

z-index是因为我不想摆脱歌曲信息，它有助于歌曲结束后的目的。我希望在悬停时显示悬停信息，这是第一个想到的解决方案。

Answer 1

如果您的UL LI html语法是用户将要悬停的代码区域，则下面的代码可以让您检测某人何时悬停在您的某个LI元素上。

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

Answer 2

试试此代码

    var descriptions = ["Sad Man's Tongue. . .test1",
    "Breed. . .test2",
    "Everything Zen. . .test3",
    "Ain't It Funky Now Pt2. . .test4",
    "Killing All The Joy. . .test5",
    "OWS. . .test6",
    "X1 Alpha. . .test7",
    "Low. . .test8",
    "Reconsider Baby. . .test9",
    "4Lee. . .test10",
    "Show Biz Kids. . .test11"]

  $( "li" ).hover(function() {                               
      var i=0;
      while (i<descriptions.length)
      {
        if($(this).text() == descriptions[i].split(". . .")[0].toString())
        {
            document.getElementById("song-hover-info").innerHTML = descriptions[i].split(". . .")[1]; 
        }
        i+=1;
      }

        });

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

2 个答案: