Question

除了我只能通过onclick触发音频，而且希望它在onmouseover之外，我可以正常工作。根据我的阅读，这是需要同时容纳两个同时执行功能的问题，但是我不知道该怎么做。

示例在这里-http://news.vikasproject.org/test/

<body>

<audio id="letter-1"><source src="audio/y.mp3" type="audio/mp3"></audio>
<audio id="letter-2"><source src="audio/e.mp3" type="audio/mp3"></audio>
<audio id="letter-3"><source src="audio/s.mp3" type="audio/mp3"></audio>

<div class="word" style="margin-bottom: 35px;">
<span class="1st-letter" onclick="document.getElementById('letter-1').play()">Y</span>
<span class="2nd-letter" onclick="document.getElementById('letter-2').play()">E</span>
<span class="3rd-letter" onclick="document.getElementById('letter-3').play()">S</span>
</div>

<div class="1st-letter" onclick="document.getElementById('letter-1').play()">1</div>
<div class="2nd-letter" onclick="document.getElementById('letter-2').play()">2</div>
<div class="3rd-letter" onclick="document.getElementById('letter-3').play()">3</div>

<script>
function hoverByClass(classname,colorover,colorout="transparent"){
    var elms=document.getElementsByClassName(classname);
    for(var i=0;i<elms.length;i++){
        elms[i].onmouseover = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor=colorover;
            }
        };
        elms[i].onmouseout = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor=colorout;
            }
        };
    }
}
hoverByClass("1st-letter","yellow");
hoverByClass("2nd-letter","pink");
hoverByClass("3rd-letter","orange");
</script>

</body>

非常感谢您的协助

同时触发两个鼠标悬停功能

0 个答案: