顺风圈背景颜色在带有三个水平点的div上空悬停
顺风圈背景颜色在带有三个水平点的div上空悬停
提问于 2021-11-29 07:57:27
如何在顺风css中的三个水平点悬停时得到一个圆形背景颜色？
样本代码：
const Header = () => {
return (
<div className="flex px-4 py-4">
<div className="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
<div className="text-sm align-middle">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 hover:bg-blue-200 hover:rounded-full"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</div>
</div>
);
};
export default Header;回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-30 12:52:54
您可以更改父元素的背景，如果要更改颜色，只需在SVG元素上添加fill="currentColor"即可。
就像这样。
<div class="flex px-4 py-4">
<div class="mr-auto font-bold text-md mb-2">The Coldest Sunset</div>
<div class="text-sm align-middle group hover:bg-blue-200 rounded-full w-8 h-8 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</div>
</div>您可以在尾风操场https://play.tailwindcss.com/azLEEd0RUu上快速检查。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70151333
复制相关文章
相似问题
腾讯云开发者
