在 Tailwind 中继承悬停状态

Question

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

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

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

Answer 1

将 group class 添加到 link 并在图标上使用 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>

在 Tailwind 中继承悬停状态

Inherit Hover state in Tailwind

css

tailwind-css