Tailwind CSS中如何实现hidden到block的悬停切换？

问题根源 #

用hidden类的元素会被完全从文档流中移除，不会触发任何鼠标事件，所以hover:block永远不会生效。而invisible只是让元素透明，若.ply元素本身无尺寸或父元素hover区域未覆盖其位置，也可能触发失败。

可行解决方案 #

方案1：用透明度替代完全隐藏（推荐）

元素仍占据文档流位置，仅透明且不响应事件，悬停时恢复：

.bs .bsx .limit .ply {
  @apply opacity-0 pointer-events-none absolute w-full z-[1] h-full top-0 bg-black/[0.51] transition-opacity duration-300;
}
.bs .bsx .limit:hover .ply {
  @apply opacity-100 pointer-events-auto;
}

方案2：绑定父元素hover触发（适配hidden需求）

将hover事件绑定到父元素（如.limit），因为hidden状态的子元素无法触发自身hover：

.bs .bsx .limit .ply {
  @apply hidden absolute w-full z-[1] h-full top-0 bg-black/[0.51];
}
.bs .bsx .limit:hover .ply {
  @apply block;
}

方案3：适配invisible的父元素触发写法

.bs .bsx .limit .ply {
  @apply invisible absolute w-full z-[1] h-full top-0 bg-black/[0.51];
}
.bs .bsx .limit:hover .ply {
  @apply visible;
}

核心注意点 #

• 禁止给hidden状态的元素直接添加hover:*类，元素处于hidden时无法响应任何鼠标事件
• 优先通过父元素hover控制子元素显隐，或用透明度切换替代完全隐藏

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