在 Tailwind 中继承 Hover 状态

Posted 2023-03-06

【中文标题】在 Tailwind 中继承 Hover 状态

【英文标题】：Inherit Hover state in Tailwind

【发布时间】：2022-01-21 19:39:49

【问题描述】：

这是一个非常简单的场景，但我找不到框架内的解决方案。 我有一个带有文本和图标的链接。在链接悬停时，图标应该获得不同于链接文本的颜色。

<a href="#" class="block text-black hover:text-red"><i class="fa fa-icon text-grey hover:text-blue"></i>

图标悬停仅在鼠标悬停而不是整个链接时触发。 我知道我仍然可以在顺风中编写自定义类，但这是一个非常基本的问题，我希望有人知道更好的解决方案。

【参考方案1】：

添加group 类以链接并在图标上使用group-hover:。

<script src="https://cdn.tailwindcss.com"></script>

<a href="#" class="block p-6 border group text-black hover:text-red">
  <span class="text-grey group-hover:text-blue-500">icon</span>
</a>

【讨论】：

谢谢！而已。我在文档中查找了继承，但一无所获，我应该滚动悬停：doc 一直向下而不是呵呵。