javascript - 不同鼠标悬停时发出多种声音

Question

我发现多个具有不同声音的鼠标悬停有问题。

问题:当我在 Rockbutton 上进行鼠标悬停时，它会播放 Popaudio 的歌曲。有没有更好的方法或简单的解决方案？非常感谢!

    // Muziekje Rock --------------------------------------------------Muziekje rock
    document.getElementById("RockButton").onmouseout = function() {mouseOut()};
    function mouseOver() { 
        document.getElementById('RockDanceAudio').play();
    }
    function mouseOut() { 
      document.getElementById('RockDanceAudio').pause();
    }




       document.getElementById("PopButton").onmouseout = function() {mouseOut()};
    function mouseOver() { 
        document.getElementById('PopAudio').play();
    }
    function mouseOut() { 
      document.getElementById('PopAudio').pause();
    }



<!-- Pagina3 Tatjana                                  PaginaDrieTatjana-->
    <div id="PaginaDrieTatjana" style="display:none;">
      <h1>Kies soort dans</h1>

      <div id="Rock">
        <h3>Rock Dance</h3>
        <img src="Tatjana/Een.jpg" style="width: 100%;">
        <div id="RockButton">
            <p>Kiezen</p>
            <audio id="RockDanceAudio" src="rock_audio.mp3"></audio>
        </div>
      </div >

      <div id="Pop">
        <h3>Pop Dance</h3>
        <img src="Tatjana/Twee.jpg" style="width: 100%;">
        <div id="PopButton">
            <p>Kiezen</p>
            <audio id="PopAudio" src="pop_audio.mp3"></audio>
        </div>

Answer 1

您正在覆盖 mouseOut 和 mouseOver 函数，请尝试以下操作:

var rockButton = document.getElementById("RockButton");
rockButton.onmouseout = function() {
    document.getElementById('RockDanceAudio').pause();
};
rockButton.onmouseover = function() { 
    document.getElementById('RockDanceAudio').play();
};


var popButton = document.getElementById("PopButton");
popButton.onmouseout = function() {
    document.getElementById('PopAudio').pause();
};
popButton.onmouseover = function() { 
    document.getElementById('PopAudio').play();
};