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

multiple sounds on different mouseovers

本文关键字：鼠标 悬停 声音      更新时间：2023-09-26

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

问题:当我做一个鼠标在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>

你正在重写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();
};

你重写了你的初始mouseOut()函数后重新定义它播放PopAudio。

这意味着当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();
}
相关文章：