悬停时如何更改 svg 的颜色？

问题描述 投票：0回答：1

我正在制作这个登陆页面，我的 figma 说，当按钮图标悬停时，我需要将背景颜色更改为白色，将 svg 文件更改为灰色。更改背景颜色很容易，但 changinf svg 颜色很难，我仍然没能做到，你能帮帮我吗？

HTML：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test admissional</title>
    <link rel="stylesheet" href="./main.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../styles/css.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    
</head>
<body>
    <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" style="color: white"></i>
            <i class="bi bi-globe2" style="color: white"></i>
            <i class="bi bi-bar-chart" style="color: white"></i>
        </div>

        <div class="bottomNav d-flex flex-column">
            <i class="bi bi-gear" style="color: white"></i>
            <i class="bi bi-bell-fill" style="color: white"></i>
            <i class="bi bi-person-circle" style="color: white"></i>
        </div>
    </nav>
    
    <span>This is the test page</span>

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

CSS：

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

i {
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topNav {
    gap: 20px
}

i:hover {
    background-color: rgb(255, 255, 255);
    fill: #000;
}

svg:hover {
    fill: black
}

如你所见，我尝试在悬停 css 上使用“填充”，我也尝试使用“颜色”，但它们都不起作用，所以我有点无能为力。

html css twitter-bootstrap
1个回答
0
投票

Bootstrap 图标基于字体。每个图标都是一个文本字符。因此，您可以使用 CSS 属性 

color
.

更改图标的颜色

在您的 HTML 中，您使用内联 CSS 指定颜色：

<i class="bi bi-app" style="color: white"></i>
。您正试图在 CSS 中的 
:hover
上覆盖此颜色。但是，内联 CSS 始终优先。也就是说，当浏览器看到内联 CSS 时，它会更喜欢呈现这些样式，而不是在外部 CSS 样式表中定义的任何内容。

您需要删除内联样式并将其放入您的样式表中，以便对其进行适当处理。例如：

body {
  background-color: #444;
}
i {
  color: white;
  font-size: 40px;
}
i:hover {
  color: red;
}
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
  <i class="bi bi-app"></i>
  <i class="bi bi-globe2"></i>
  <i class="bi bi-bar-chart"></i>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.