css 我怎么能改变我的svg的颜色时徘徊？

1rhkuytd 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(125)

我makign这个着陆页，我的figma说，当按钮图标悬停，我需要改变背景颜色为白色和SVG文件为灰色。改变背景颜色是轻松忙碌但changinf的svg颜色是困难的，我仍然没有设法这样做，你能帮助我吗？

* {
    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
}

<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" 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="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

正如你所看到的，我尝试使用'填充'悬停CSS，我也尝试使用'颜色'，但他们都没有工作，所以我有点无能。

css

来源：https://stackoverflow.com/questions/76267409/how-can-i-change-the-color-of-my-svg-when-hovered

1条答案

按热度按时间

gojuced71#

Bootstrap 图标基于字体。每个图标都是一个文本字符。因此，您可以使用CSS属性color更改图标的颜色。
在你的HTML中，你用内联CSS指定颜色：<i class="bi bi-app" style="color: white"></i>。您正在尝试在CSS中覆盖:hover上的此颜色。但是，inline CSS always takes precedence。也就是说，当浏览器看到内联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/bootstrap-icons@1.3.0/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>

赞(0）回复(0）举报 2023-05-19

我来回答

css 我怎么能改变我的svg的颜色时徘徊？

1条答案

相关问题

热门标签

最新问答