我一直试图让我的 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>
有任何想法吗?
最佳答案
1- 默认情况下,只为填充实用程序生成响应变体。因此,我们需要创建所需的变体来激活 :hover
状态为 fill-current
类(class)。
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>
Working example引用
Fill - Tailwind docs
关于html - 使用 Tailwind 在悬停时填充 SVG 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65097746/