如何使用Tailwind CSS实现悬停图标时为指定div添加hidden类

完全可以实现，根据DOM结构选择对应写法即可，绝大多数场景不需要写额外JavaScript，靠Tailwind内置的状态变体就能完成需求。

纯Tailwind无JS方案（覆盖绝大多数常规场景） #

Tailwind提供的group/peer状态变体，专门用来处理父元素/兄弟元素触发样式变更的交互，不需要额外写逻辑：

• 如果要隐藏的div是图标元素的后代节点（即div写在图标标签的嵌套结构内部）：
  • 给左上角的图标（或图标的直接包裹元素）添加group类，标记为悬停触发源
  • 给需要控制隐藏的div添加group-hover:hidden类即可。默认状态下div正常显示遮挡背景，鼠标悬停在图标上时div自动隐藏透出底层背景图，鼠标移开后自动恢复显示。
• 如果要隐藏的div是图标元素的兄弟节点（即div和图标标签平级、共享同一个父元素，这也是该需求最常见的DOM结构）：
  • 给左上角的图标添加peer类，标记为悬停触发源
  • 给需要控制隐藏的div添加peer-hover:hidden类即可，触发逻辑和上述一致。

对应基础实现代码示例：

<!-- 页面根节点，提前配置好需要透出的背景图 -->
<body class="bg-[url('/your-page-bg.jpg')] bg-cover min-h-screen">
  <!-- 左上角固定图标：和遮罩层为兄弟节点，添加peer类，设置更高z-index避免被遮挡 -->
  <div class="fixed top-4 left-4 z-50 peer cursor-pointer p-2 rounded bg-white/80">
    <img src="/your-icon.svg" alt="功能图标" class="w-8 h-8" />
  </div>

  <!-- 盖在背景上的内容层，即需要控制显隐的指定div：添加peer-hover:hidden -->
  <div class="fixed inset-0 bg-white z-10 peer-hover:hidden">
    <!-- 此处放置日常页面展示的、会遮挡背景的所有内容 -->
    <main class="p-8">
      <h1>页面常规内容</h1>
    </main>
  </div>
</body>

如果想要更顺滑的显隐过渡效果，不要直接用hidden（该属性为硬切换无过渡），可以换成透明度控制：给目标div添加transition-opacity duration-300 peer-hover:opacity-0 peer-hover:pointer-events-none，即可实现淡入淡出的交互，同时透明状态下不会拦截背景层的交互事件。

轻量JS方案（适配复杂DOM嵌套场景） #

如果图标和要隐藏的div跨多层DOM嵌套，用内置变体不好触发，只需要加几行原生JS即可实现，不需要引入额外依赖：

<!-- 图标元素加id方便选中 -->
<div id="hoverTrigger" class="fixed top-4 left-4 z-50 cursor-pointer p-2 rounded bg-white/80">
  <img src="/your-icon.svg" alt="功能图标" class="w-8 h-8" />
</div>

<!-- 需要隐藏的目标div加id方便选中 -->
<div id="maskContent" class="fixed inset-0 bg-white z-10">
  <main class="p-8">
    <h1>页面常规内容</h1>
  </main>
</div>

<script>
  const trigger = document.getElementById('hoverTrigger')
  const targetDiv = document.getElementById('maskContent')
  trigger.addEventListener('mouseenter', () => targetDiv.classList.add('hidden'))
  trigger.addEventListener('mouseleave', () => targetDiv.classList.remove('hidden'))
</script>

注意事项 #

• 务必给左上角图标设置比目标div更高的z-index值，避免目标div遮挡图标导致悬停事件无法触发
• 如果背景图不是直接挂在body上，要确认目标div隐藏后，下层的背景图容器层级足够、没有被其他元素遮挡

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