CSS音频停止按钮点击变色异常：鼠标按下移出后无法恢复原色

这个问题我太熟悉了！你遇到的情况很典型——当按住鼠标移出按钮时，onmouseup事件根本不会触发在按钮元素上，所以颜色恢复的逻辑就没机会执行。给你两个实用的解决方案，看你偏好哪种：

方案1：纯CSS实现（首推，简洁又省心） #

完全不用写JS函数，直接利用CSS原生的伪类就能搞定，浏览器会自动处理所有状态切换的细节，包括鼠标移出的情况。

举个代码示例：

/* 按钮正常状态样式 */
.audio-stop-btn {
  background-color: #ff4444;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease; /* 加个过渡让颜色变化更平滑 */
}

/* 鼠标按下时的激活状态 */
.audio-stop-btn:active {
  background-color: #cc0000;
}

/* 可选：鼠标悬浮时的样式，提升交互体验 */
.audio-stop-btn:hover {
  background-color: #ff6666;
}

原理很简单：:active伪类只会在鼠标在按钮上且处于按下状态时生效，一旦鼠标移出按钮，这个状态就会自动解除，按钮立刻恢复原色，完全不用手动处理事件。而且这种方式还天然支持键盘操作（比如Tab选中按钮后按回车），兼容性拉满。

方案2：改进你的JS逻辑 #

如果你因为某些原因必须用JS控制颜色，那只需要给按钮额外绑定onmouseleave事件，让鼠标离开按钮时，不管有没有松开鼠标，都触发颜色恢复的函数。

示例代码如下：

HTML部分 #

<button class="audio-stop-btn" onmousedown="pressBtn()" onmouseup="releaseBtn()" onmouseleave="releaseBtn()">停止</button>

JS部分 #

function pressBtn() {
  const btn = document.querySelector('.audio-stop-btn');
  btn.style.backgroundColor = '#cc0000';
}

function releaseBtn() {
  const btn = document.querySelector('.audio-stop-btn');
  btn.style.backgroundColor = '#ff4444';
}

这样一来，不管用户是松开鼠标，还是按住鼠标移出按钮，releaseBtn()都会被触发，按钮就能正常恢复原色了。

内容的提问来源于stack exchange，提问作者treetop