JavaScript问题：鼠标悬停按钮时文本消失且变为绿色块

数据老陈

2026-5-26

解决按钮悬停时文本消失并变成绿色块的问题

我一眼就看出问题所在啦——你用innerHTML把按钮里的所有内容都替换成了<embed>元素，原来的按钮文本自然就被覆盖没了，那个绿色块其实是浏览器对隐藏embed元素的默认渲染样式。咱们来修复这个问题，同时保留按钮的文本和音频播放功能：

方法1：保留按钮文本，追加音频元素

不用替换整个按钮内容，而是在按钮内部添加音频元素，这样原有文本就能保留：

function playSound(soundfile) {
  const button = document.getElementById("musicButton");
  // 先移除已存在的音频元素，避免重复播放叠加
  const existingEmbed = button.querySelector("embed");
  if (existingEmbed) {
    existingEmbed.remove();
  }
  // 创建新的embed并添加到按钮中，不替换原有文本
  const embed = document.createElement("embed");
  embed.src = soundfile;
  embed.hidden = true;
  embed.autostart = true;
  embed.loop = false;
  button.appendChild(embed);
}

按钮HTML保持不变：

<button id="musicButton" class="button" type="button" name="music" onmouseover="playSound('MySong.wav')">Hover Me For Sick Beats!</button>

方法2：使用更现代的HTML5 Audio API（推荐）

<embed>是比较老旧的实现方式，用HTML5原生的Audio对象更可靠，兼容性更好，而且完全不会影响按钮的外观：

function playSound(soundfile) {
  // 停止之前的音频（如果存在），避免重复播放叠加
  if (window.soundPlayer) {
    window.soundPlayer.pause();
    window.soundPlayer.currentTime = 0;
  }
  // 创建新的Audio实例并播放
  window.soundPlayer = new Audio(soundfile);
  window.soundPlayer.play();
}

这个方法里，按钮文本会完全保留，音频在后台播放，不会改变按钮的任何显示效果。