Html 悬停时带有 SVG 图标 colored颜色变化的按钮

发布于04月17日

通常，用字体图标更改 bootstrap 按钮悬停时的 colored颜色非常容易，但是，由于某些原因，我无法使用SVG图标.

即使我try 在SVG图标上添加一个样式，如下面的示例所示，这也不会真正起作用，因为当鼠标悬停按钮时，图标 colored颜色不会改变.

如何使图标和文本在按钮悬停时变为白色？

.svgoutline {
    fill: #0d6efd;
}
.svgoutline:hover {
    fill: #fff;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<a href="/index" class="btn btn-outline-primary"><span class="me-1">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" width='8px' height='13px' class="svgoutline" style='margin-bottom: 3px;' viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/><title>Browse</title></svg></a>

Html 悬停时带有 SVG 图标 colored颜色变化的按钮

推荐答案

Html相关问答推荐

springBoot + Thymeleaf：基于Locale设置页面语言

将弹性容器设置为内容宽度

如何将CSS滤镜仅应用于背景图像

防止position：relative的child在出界时收缩

如何在HTML中适当地为单选按钮网格添加标签？

带有图标和悬停过渡的CSS按钮

水平行中按钮的垂直偏移

有没有一种方法可以提高代码中tailwind 类名的可读性？

如何防止滑动滚动元素时touch 屏出现空白区域？

如何使用 HTML 将对象数组发送到 Nodejs Express

为什么我的网页显示网格区域彼此相邻，而不是我设置它们的方式？

为 HTML5 文本字段设置最后六位正则表达式模式

当作为常规图片输入时，Cloudfront分布式图像可显示，但作为背景图像不显示

防止HTML输入中出现负数但接受小数

有没有办法在 Flutter 中创建这个浮动标签表单？

将 HTML 元素粘贴到容器底部，而不剪裁其顶部

在 SQL 中合并 HTML 表中的单元格

自定义进度条 Html 和 CSS 布局

弹出窗口溢出溢出：自动，我不明白为什么

正确使用视频作为背景