Question

我发现有不同声音的多个mousovers有麻烦。

麻烦：当我在Rockbutton上做一个mousover时，它会播放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();
};

Answer 2

稍后重新定义它以播放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();
}

不同的鼠标悬停上的多个声音

2 个答案: