Is there a way to make a sound play only once when hovering over a list item that contains an image?
Here is the HTML and JavaScript code I am using:
function playclip()
{
var audio = document.getElementsByTagName("audio")[0];
audio.play();
}<ul id="nav1" class="widgeticons2">
<li>
<a onmouseover="playclip();" href="Statistics.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" />
<span">إحصائيات
</span>
</a>
</li>
<li>
<a onmouseover="playclip();" href="SMS.aspx">
<img src="../Styles/SMSKat/img/MOHM4ZImg/NEW_IMG/smslogo.png" alt="" />
<span>النظام
</span>
</a>
</li>
</ul>The current issue is that the sound plays every time the mouse moves over the image inside the list item. How can I modify the code to make the sound play only once until the mouse goes out of the list item itself?