利用尾风实现悬停的SVG彩色填充
利用尾风实现悬停的SVG彩色填充
提问于 2020-12-01 20:06:13
我一直试图让我的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>有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-03 21:30:11
默认情况下，只为填充实用程序生成响应变量。因此，我们需要创建必要的变体来激活: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>参考文献
Stack Overflow用户
发布于 2022-11-22 17:02:34
基于父状态的样式化
如果可以/希望依赖父状态，则可以使用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悬停图标充满黑色和文字，改变颜色为橙色(琥珀-500)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65097746
复制相关文章
相似问题
腾讯云开发者
