У меня это работает, за исключением того, что я могу запускать звук только через 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>
Большое спасибо за вашу помощь