移动端按钮保持按压状态的技术问题求助

这个主题切换按钮在桌面端表现正常：鼠标悬停时会变色并显示内阴影，移开后恢复原状。但在移动端触摸按钮后，它会一直保持hover时的样式，无法自动恢复。

问题原因 #

移动端触摸交互与桌面端鼠标交互逻辑存在差异：触摸元素会触发:hover状态，但没有对应的「鼠标移出」事件来清除该状态，导致hover样式持续保留。

解决方案 #

方案1：通过媒体查询区分hover支持设备

仅在支持鼠标hover的设备（如桌面端）上应用hover样式，移动端改用:active处理触摸时的临时状态：

:root {
  --green: #4285f4;
  --black: rgba(9, 13, 25, 0.752);
  --box-shadow: .4rem .4rem 1rem #ccc, -.4rem -.4rem 1rem #fff;
  --box-shadow-inset: .4rem .4rem 1rem #ccc inset, -.4rem -.4rem 1rem #fff inset;
}

#theme-toggler {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 1000;
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  text-align: center;
  color: var(--black);
  background: var(--bg-color);
}

/* 仅在支持hover交互的设备上应用悬停样式 */
@media (hover: hover) {
  #theme-toggler:hover {
    color: var(--green);
    box-shadow: var(--box-shadow-inset);
  }
}

/* 移动端触摸时的按压状态，松开后自动恢复 */
#theme-toggler:active {
  color: var(--green);
  box-shadow: var(--box-shadow-inset);
}

方案2：用JavaScript处理触摸事件

监听触摸结束事件，让元素失去焦点以清除hover状态：

<div id="theme-toggler" class="fas fa-moon"></div>
<script src="https://kit.fontawesome.com/a5ea1b4e1c.js" crossorigin="anonymous"></script>
<script>
const themeToggler = document.getElementById('theme-toggler');
themeToggler.addEventListener('touchend', function(e) {
  e.preventDefault();
  this.blur(); // 元素失去焦点后，hover状态自动清除
});
</script>

两种方案均可解决移动端按钮持续保持按压状态的问题，可根据实际需求选择使用。

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