文本 - 鼠标悬停在单词上 - 更改颜色，单击单词 - 播放音频，鼠标移出 - 更改文本颜色

Question

I found difficult to make it work because im not familiar with js.

I want to write an an line using many words, but every word have own functionality. Example: On mouse over word-1 change the text color to red, on click play audio-1, on mouse out change the text color to black again. This way for every word on the line, using different audio files for different words.

Right now i used ty this, but i cant manage it to work. Any help?

      <script>
function playAudio(url) {
  new Audio(url).play();
}
    </script>

<br><font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio1.mp3')">Word1</br>
   
<br><font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio2.mp3')">word2</br>
   
<br><font onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio3.mp3')">word3<br>

Answer 1

It doesn't work because the tag is outdated. It does not function in HTML5.

You can use <p> to make your functions work:

    <script>
  function playAudio(url) {
    new Audio(url).play();
  }
      </script>
  
  <br><p onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio1.mp3')">Word1</p</br>
     
  <br><p onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio2.mp3')">word2</p></br>
     
  <br><p onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio3.mp3')">word3</p><br>

The <p> paragraphs have a 100% width (the whole page) so their with has to be set to something smaller or fit-content . Otherwise you will be able to hover or click on the elements at positions where there is no text.