如何用Tailwind实现hover后移除类并保持元素持续显示？

Tailwind的group-hover这类伪类样式是瞬时触发的——只有当鼠标悬停在父元素上时，子元素的inline-block才会生效，鼠标离开后就会恢复hidden状态，没办法实现「hover一次就永久显示」的持久化状态切换。

可行解决方案（结合少量JS） #

如果要实现需求，最简单的方式是给父元素添加鼠标进入事件监听，手动给子元素移除hidden类：

单个元素示例 #

<span class='group inline-block relative' onmouseenter="this.querySelector('.tooltip').classList.remove('hidden')">
  Hello
  <span class='hidden absolute -top-16 left-16 tooltip'>&#45;</span>
</span>

多个同类元素示例（事件委托） #

<!-- HTML结构 -->
<span class='group inline-block relative hover-trigger'>
  Hello
  <span class='hidden absolute -top-16 left-16 tooltip'>&#45;</span>
</span>

<span class='group inline-block relative hover-trigger'>
  World
  <span class='hidden absolute -top-16 left-16 tooltip'>&#43;</span>
</span>

<!-- 脚本放在页面底部 -->
<script>
  document.querySelectorAll('.hover-trigger').forEach(el => {
    el.addEventListener('mouseenter', function() {
      this.querySelector('.tooltip').classList.remove('hidden');
    });
  });
</script>

替代思路（无需JS，但有局限性） #

如果不想引入JS，可以利用:focus-within伪类配合tabindex，但需要用户点击父元素来触发持久显示（仅hover无法实现）：

<span class='group inline-block relative' tabindex="0">
  Hello
  <span class='hidden absolute -top-16 left-16 group-focus-within:inline-block'>&#45;</span>
</span>

这种方式的局限性是：必须点击父元素使其获得焦点，才能让子元素保持显示，单纯hover无法达成持久化效果。

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