如何在鼠标悬停时更改SVG颜色？Bootstrap图标问题求助

问题出在两个核心点：一是你给<i>标签加了行内样式style="color: white"，它的优先级远高于CSS中的hover伪类，导致hover的颜色设置完全被覆盖；二是你用的Bootstrap Icons是字体图标，不是内嵌SVG，所以fill属性对它无效，得用color来控制图标颜色。

修改步骤 #

• 移除所有<i>标签里的行内style="color: white"
• 在CSS中统一设置图标默认白色，再通过hover伪类修改颜色，确保选择器能正确命中目标

修改后的完整代码 #

CSS代码

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

i {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* 把行内样式移到这里统一控制 */
}

.topNav {
    gap: 20px
}

i:hover {
    background-color: rgb(255, 255, 255);
    color: #000; /* 用color代替fill，字体图标靠color控制颜色 */
}

HTML代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<nav class="d-flex flex-column bg-secondary vh-100 justify-content-between custom-width" style="width: fit-content;">
    <div class="topNav d-flex flex-column ">
        <img src="./src/logo.svg" alt="">
        <i class="bi bi-app"></i>
        <i class="bi bi-globe2"></i>
        <i class="bi bi-bar-chart"></i>
    </div>

    <div class="bottomNav d-flex flex-column">
        <i class="bi bi-gear"></i>
        <i class="bi bi-bell-fill"></i>
        <i class="bi bi-person-circle"></i>
    </div>
</nav>

<span>This is the test page</span>

<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

原理补充 #

• Bootstrap Icons基于字体文件实现，图标本质是特殊字符，所以控制颜色的逻辑和普通文字一致，用color属性而非fill
• 行内样式的优先级是最高的，必须移除才能让CSS中的hover样式生效

内容的提问来源于stack exchange，提问作者NewDev