html - 悬停时 SVG 图标颜色变化的按钮

Question

通常，使用字体图标更改 Bootstrap 按钮悬停时的颜色非常简单，但是，由于某种原因，我无法使其与 SVG 图标一起使用。

即使我尝试在 SVG 图标上添加样式(如下例所示)，这也不会真正起作用，因为悬停按钮时图标颜色不会改变。

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

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

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0ced0cc" rel="noreferrer noopener nofollow">[email protected]</a>/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>

Answer 1

您必须将 :hover 添加到 .btn 而不是 svg。试试这个

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

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b455b47" rel="noreferrer noopener nofollow">[email protected]</a>/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>