如何防止点击:hover触发显示的元素时元素自动隐藏

问题根因 #

移动端浏览器不存在原生的hover交互机制，点击元素时会短暂触发:hover伪类，但点击元素本身后，多数浏览器会判定hover状态结束，自动将元素恢复为初始的visibility: hidden状态，因此出现点击后元素直接消失的问题。

修复方案 #

方案1：JS控制显示状态（推荐，完全匹配需求） #

完全不依赖CSS的:hover做核心显示控制，改用JS管理显示状态，同时兼容桌面端hover逻辑：

1. 先调整CSS，新增专用的可见状态类

.target {
  visibility: hidden;
  /* 原有样式保持不变 */
}
/* 兼容桌面端hover逻辑 */
.trigger:hover .target,
.target.is-visible {
  visibility: visible;
}

2. 新增JS逻辑控制状态，实现点击触发显示、点关闭/点外部隐藏的需求

const triggerEl = document.querySelector('.trigger') // 触发元素，即hover时显示目标的元素
const targetEl = document.querySelector('.target') // 要显示的目标元素
const closeBtn = targetEl.querySelector('.close-btn') // 目标元素内的关闭按钮

// 点击触发元素切换显示状态
triggerEl.addEventListener('click', e => {
  e.stopPropagation()
  targetEl.classList.toggle('is-visible')
})

// 点击关闭按钮隐藏元素
closeBtn.addEventListener('click', e => {
  e.stopPropagation()
  targetEl.classList.remove('is-visible')
})

// 点击目标元素本身不关闭
targetEl.addEventListener('click', e => {
  e.stopPropagation()
})

// 点击页面其他区域隐藏元素
document.addEventListener('click', () => {
  targetEl.classList.remove('is-visible')
})

方案2：CSS补充focus适配（轻量方案） #

如果不想写太多JS，可以补充CSS的:focus伪类适配移动端，只需要加少量代码：

1. 给触发元素、目标元素都加上tabindex="0"属性，让元素可以获得焦点

<div class="trigger" tabindex="0">触发元素</div>
<div class="target" tabindex="0">
  要显示的内容
  <button class="close-btn">关闭</button>
</div>

2. 修改CSS选择器，让元素获得焦点时保持可见

.target {
  visibility: hidden;
}
.trigger:hover .target,
.trigger:focus .target,
.target:hover,
.target:focus {
  visibility: visible;
}

该方案的限制是点击页面空白处元素失焦就会自动隐藏，如果你需要自定义关闭逻辑，还是需要补充少量JS实现。

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