使用 Tailwind 在悬停时填充 SVG 颜色

Question

我一直试图让我的 svg 在悬停时用黑色填充，但似乎无法做到。

我希望它有这样的黑色轮廓 .
然后像这样填充.

这是我希望在悬停时填充它的代码。但是，它并不完全有效。如果我hover:脱掉hover:fill-current它，它就会一直填充黑色。

<svg class="h-6 w-6 text-black hover:fill-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
    stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>

有任何想法吗？

Answer 1

1- 默认情况下，只为填充实用程序生成响应变体。因此，我们需要创建所需的变体来激活类的:hover状态fill-current。

module.exports = {
  theme: {
    extend: {
    },
  },
  variants: {
    fill: ['hover', 'focus'], // this line does the trick
  },
  plugins: [],
}

2- 考虑使用颜色类来获得准确的结果。

<svg class="h-6 w-6 text-black hover:fill-current hover:text-black" ... />
</svg>

工作示例

参考

填充 - Tailwind 文档

Answer 2

基于父状态的样式

group如果您可以/想要依赖父状态，则可以使用修饰符。添加"group"到父元素类和"group-hover:fill-black"svg 类。

<div class="group text-black">
  <svg class="h-6 w-6 group-hover:fill-black" 
  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
      stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00- 
 7-7z" />
  </svg>
  <p class="group-hover:text-amber-500">Hello color</p>
</div>

在上面的示例中，有一个带有图标和文本的 div。在 div 上，悬停图标填充为黑色，文本颜色更改为橙​​色 (amber-500)。