如何在支持hover的设备上用Tailwind的group-hover实现悬停效果？

要实现「支持hover的设备上，父元素group被悬停时，子元素<p>文本变红」的效果，你需要把媒体查询和group-hover状态正确组合，替换掉原来的错误类名即可。

正确代码示例 #

<div id="card" class="group">
  <p class="text-blue-400 [@media(hover:hover)]:group-hover:text-red-400">
    Here is placeholder text.
  </p>
</div>

代码说明 #

• [@media(hover:hover)]：仅在支持hover交互的设备（比如桌面端）上触发后续样式
• group-hover:：指定样式生效的条件是带有group类的父元素被悬停
• text-red-400：最终要应用的文本红色样式

为什么原来的代码失效？ #

你之前用的[@media(hover:hover){&:hover}]:text-red-400，其中的&:hover是指<p>标签自身被悬停，而非父元素group的悬停状态，所以无法实现你想要的效果。

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