移动端如何移除点击元素父容器的hover状态？

要解决移动端无法取消hover状态的问题，我们可以用CSS类结合原生JavaScript替代纯CSS的hover控制，既能保留桌面端hover体验，又能在移动端实现点击关闭的需求：

调整后的CSS #

.popup {
  border: 3px solid green;
  background-color: yellow;
  display: none;
  height: 100vw;
  justify-content: center;
  position: relative;
  top: -1em;
  width: 100vw;
}

/* 保留桌面端hover触发效果 */
.container:hover .popup,
/* 移动端通过JS添加的类控制显示状态 */
.container.active .popup {
  display: flex;
}

修改后的HTML #

<div class="container">
  <div class="text">
    TEXT
  </div>

  <div class="popup">
    popup content
  </div>
</div>

原生JavaScript逻辑实现 #

const container = document.querySelector('.container');
const textToggle = document.querySelector('.text');
const popup = document.querySelector('.popup');

// 点击toggle切换弹窗显示/隐藏
textToggle.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡到全局，避免误触发关闭
  container.classList.toggle('active');
});

// 点击弹窗本身直接关闭
popup.addEventListener('click', (e) => {
  e.stopPropagation();
  container.classList.remove('active');
});

// 点击页面任意外部区域关闭弹窗
document.addEventListener('click', () => {
  container.classList.remove('active');
});

逻辑说明 #

1. 用.active类替代纯CSS的:hover控制弹窗显示，彻底避免移动端点击后hover状态残留的问题
2. 点击toggle时切换active类，实现弹窗的打开/关闭
3. 点击弹窗或页面其他区域时，直接移除active类完成关闭
4. 通过e.stopPropagation()防止点击toggle和弹窗时触发全局点击事件，避免刚打开就关闭的冲突

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