不同鼠标悬停时的多种声音

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

您稍后在重新定义它以播放 PopAudio 时覆盖了您的初始 mouseOut() 函数。

也就是说当mouseout事件发生时，只播放后者

这是因为仅当事件实际发生时才对函数求值。

为防止出现这种情况，请为函数使用不同的名称：

document.getElementById("RockButton").onmouseout = function() {mouseOutRock()};
function mouseOutRock() { 
  document.getElementById('RockDanceAudio').pause();
}

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

最好使用匿名函数：

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

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

Answer 2

您正在覆盖 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();
};

不同鼠标悬停时的多种声音

multiple sounds on different mouseovers

javascript

onmouseover