如何在 hover 时将 opacity-50 的元素恢复为正常颜色？

你写的代码没效果，核心原因是opacity-50会让整个元素（包括文本）都处于半透明状态——即便hover时设置text-black，文本的不透明度还是50%，视觉上和原状态差别极小，所以看起来没生效。

下面是几种可行的解决方法：

• 仅文本半透明，hover恢复正常：放弃元素级的opacity，改用文本颜色的透明度类。Tailwind支持在颜色后加/百分比来设置透明度，这样hover时直接切换到完全不透明的颜色即可：

  <p class="text-black/50 hover:text-black">Test</p>
  

• 整个元素半透明，hover时整体恢复正常：如果元素还有背景、边框等需要半透明的样式，hover时重置opacity为1即可，文本会自动回到原本的颜色（如果需要指定黑色，再加上hover:text-black）：

  <p class="opacity-50 hover:opacity-100">Test</p>
  <!-- 若需要强制文本为黑色： -->
  <p class="opacity-50 hover:opacity-100 hover:text-black">Test</p>
  

• 精细控制：元素保持半透明，仅文本hover恢复：可以用嵌套元素分离元素和文本的样式，让父元素保持半透明，子元素文本单独设置透明度和hover效果：

  <p class="opacity-50">
    <span class="text-black/50 hover:text-black">Test</span>
  </p>
  

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