javascript 当 鼠标在文字1上悬停时，在这个文字右下角显示图片1 同样在文字2上悬停时 显示图片2，文字1和文字2在同一个表格里

在JavaScript中，你可以使用`mouseover`和`mouseout`事件来实现鼠标悬停时动态加载图片的功能。假设你已经有了一个HTML表格结构，每个单元格包含文字和隐藏的图片元素。以下是基本的示例代码： ```html <table id="myTable"> <tr> <td> <span class="hover-text" id="text1">文字1</span> <img src="image1.png" class="hidden-image" id="image1" alt="图片1" style="display:none;"> </td> <td> <span class="hover-text" id="text2">文字2</span> <img src="image2.png" class="hidden-image" id="image2" alt="图片2" style="display:none;"> </td> </tr> </table> <style> .hidden-image { position: absolute; bottom: 0; right: 0; } </style> <script> document.getElementById('myTable').addEventListener('mouseover', function(e) { if (e.target.tagName === 'SPAN') { const imgId = e.target.id.replace('text', 'image'); document.getElementById(imgId).style.display = 'block'; } }); document.getElementById('myTable').addEventListener('mouseout', function(e) { if (e.target.classList.contains('hover-text')) { const imgId = e.target.id.replace('text', 'image'); document.getElementById(imgId).style.display = 'none'; } }); </script> ``` 在这个例子中，当鼠标悬停在文字1上时，`image1`会被显示在文字1的右下角；同样地，悬停在文字2上时，`image2`会被显示。