我使用下面的脚本来更改每个单词的颜色，当鼠标移到该单词上时，将其变回黑色，效果非常好。此外，如果用户想听到发音，可以点击单词播放声音，这很好。
文本中有大量的单词，对于每个单词都有不同的解释/弹出窗口。
但是我卡住的地方是，我喜欢在鼠标上方的每个单词上添加弹出窗口，并且只显示该单词的解释。
我喜欢它在html<p title="Explanation">word-1</p>上的工作方式，但使用js我发现很难实现。我还发现了一个使用css的例子，我喜欢它，但很难与js结合。
<script>
function playAudio(url) {
new Audio(url).play();
}
</script>
<p>
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-1.mp3')">first-word</font>
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-2.mp3')">second-word</font>
<font size="6" style="font-weight:bold;" onmouseover="this.style.color='red';" onmouseout="this.style.color='black';" onclick="playAudio('audio-3.mp3')">third-word</font>
</p>
我不确定您是否正在尝试完成这样的事情。如果你正在使用Twitter Bootstrap，它很简单(而不是创建自己的弹出窗口)
这是一个示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
.para font{position:relative; cursor:pointer}
.para font:hover{color:red;}
</style>
<body>
<p class="para">
<font size="6" data-word="First Word" data-audio="https://pagalnew.com/mp3-songs/english-mp3-songs/breaking-the-rules-jubin-nautiyal-128-kbps-sound.mp3" data-content="Lorem Ipsum">first-word</font>
<font size="6" data-word="Second Word" data-audio="https://naijamusics.com/wp-content/uploads/2022/05/Imagine-Dragons-Believer.mp3" data-content="Lorem Ipsum 2">second-word</font>
<font size="6" data-word="Third Word" data-audio="https://www.fcsongs.com/uploads/audio/Ricky%20Martin%20-%20The%20Cup%20Of%20Life.mp3" data-content="Lorem Ipsum 3">third-word</font>
</p>
<div class="modal" id="AudioPlayer" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<audio id="player" controls style="width:100%">
<source id="audioSrc" src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/js/bootstrap.bundle.min.js" integrity="sha512-iceXjjbmB2rwoX93Ka6HAHP+B76IY1z0o3h+N1PeDtRSsyeetU3/0QKJqGyPJcX63zysNehggFwMC/bi7dvMig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(".para font").popover({
trigger : 'hover',
placement : 'auto',
boundary : "viewport"
});
$('.para font').on("click",function(){
var title = $(this).data("word");
var audioURL = $(this).data("audio");
$("#AudioPlayer .modal-title").html(title);
$("#AudioPlayer").modal();
var audio = $("#player");
$("#player #audioSrc").attr('src',audioURL);
audio[0].load();
audio[0].oncanplaythrough = audio[0].play();
});
$('#AudioPlayer').on('hidden.bs.modal', function (e) {
$('audio').each(function(){
this.pause();
this.currentTime = 0;
});
})
</script>
</body>
</html>
这是一个小提琴