html - 悬停按钮时如何更改svg颜色-6ren

html - 悬停按钮时如何更改svg颜色

转载作者：行者123 更新时间：2023-11-28 10:24:44

我正在尝试在悬停按钮时更改 SVG 的颜色。

我尝试使用 button:hover + svg，但这似乎不起作用。

当我运行 CSS 时，SVG 填充为白色，当我将鼠标悬停在按钮上时它不起作用。我看到它起作用的唯一方法是，如果我不将初始填充设置为橙色，而是将其设置为黑色。

出了什么问题？

.box-button {
  border: 1px solid orange;
  color: orange;
  padding: 15px 0px;
  text-align: center;
  margin: 5px 5px;
  width: 90%;
  font-size: 1.2rem;
}

.box-button:hover {
  background-color: orange;
  color: white;
}

.box-button:hover+.icon-svg {
  fill: white !important;
}

.icon-svg {
  fill: orange;
}

<button class="box-button">
  <div class="svg-container">
    <svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
      <path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 10.373 5.729 0 10.373-4.645 10.373-10.373v-41.488c-1e-3 -5.728-4.645-10.372-10.373-10.372z"/>
      <path d="m124.47 453.03c-5.728 0-10.372 4.645-10.372 10.372v41.489c0 5.728 4.644 10.372 10.372 10.372s10.372-4.645 10.372-10.372v-41.489c0-5.727-4.644-10.372-10.372-10.372z"/>
      <path d="m502.79 508.7c-4.835-3.073-11.244-1.643-14.317 3.191-2.948 4.641-1.765 10.775 2.701 13.984 28.511 19.197 36.06 57.871 16.865 86.381-19.197 28.51-57.871 36.062-86.381 16.865-28.511-19.197-36.062-57.871-16.865-86.381 11.559-17.167 30.896-27.465 51.592-27.476 5.729 0 10.372-4.645 10.372-10.372 0-5.729-4.644-10.372-10.372-10.372-45.827 9e-3 -82.972 37.166-82.962 82.993 9e-3 45.827 37.166 82.972 82.993 82.962 45.827-9e-3 82.972-37.166 82.962-82.993-5e-3 -27.583-13.717-53.361-36.588-68.782z"/>
      <path d="m575.96 543.05c-10.049-34.813-34.776-63.516-67.719-78.606v-229.23c1e-3 -3.668-1.936-7.063-5.093-8.93l-228.19-134.84c-3.257-1.925-7.303-1.925-10.559 0l-228.19 134.84c-0.218 0.125-0.374 0.311-0.581 0.456-0.208 0.146-0.404 0.311-0.612 0.477-0.901 0.709-1.675 1.565-2.292 2.531 0 0.072-0.125 0.114-0.166 0.187v0.073c-0.584 1.054-0.981 2.201-1.172 3.392 0 0.311-0.093 0.602-0.125 0.913-0.031 0.312-0.145 0.591-0.145 0.902v269.68c-1e-3 3.668 1.936 7.063 5.093 8.931l228.19 134.84c0.273 0.132 0.553 0.25 0.84 0.353 0.283 0.142 0.574 0.266 0.871 0.373 2.283 0.954 4.853 0.954 7.136 0 0.301-0.107 0.595-0.231 0.882-0.373 0.27-0.124 0.56-0.197 0.83-0.353l61.933-36.604c19.058 66.017 88.022 104.08 154.04 85.027 66.016-19.058 104.08-88.024 85.027-154.04zm-306.28-430.63l53.936 31.874-79.97 47.256c-4.935 2.916-6.572 9.281-3.656 14.215 2.916 4.935 9.28 6.572 14.215 3.656l89.813-53.033 53.936 31.874-207.8 122.76-53.936-31.874 86.888-51.343c4.935-2.916 6.572-9.28 3.656-14.215s-9.281-6.572-14.215-3.656l-96.721 57.161-53.946-31.874 207.8-122.8zm-89.897 216.57v69.256l-53.583-31.667v-69.255l53.583 31.666zm156.23 216.45c-2.76 10.463-4.138 21.242-4.099 32.063 3e-3 4.341 0.23 8.679 0.685 12.996l-52.546 31.065v-33.689c0-5.728-4.644-10.372-10.372-10.372s-10.372 4.645-10.372 10.372v33.689l-207.45-122.58v-245.58l53.594 31.667v87.428c-4e-3 3.672 1.932 7.072 5.093 8.941l74.327 43.927c1.6 0.94 3.423 1.438 5.28 1.441 5.728 0 10.372-4.645 10.372-10.372v-75.188l58.78 34.736v170.4c0 5.729 4.644 10.373 10.372 10.373s10.372-4.645 10.372-10.373v-170.4l187.99-111.09c4.933-2.916 6.567-9.278 3.651-14.21s-9.278-6.567-14.21-3.651l-187.8 110.98-59.122-34.944 207.8-122.8 69.142 40.856v216.05c-66.202-17.46-134.02 22.051-151.48 88.255zm120.37 135.79c-57.284 0-103.72-46.438-103.72-103.72s46.439-103.72 103.72-103.72c57.285 0 103.72 46.438 103.72 103.72-0.063 57.259-46.464 103.66-103.72 103.72z"/>
      <path d="m494.58 549.42c-4.02-3.883-10.394-3.883-14.413 0l-39.342 39.343-8.225-8.226c-4.12-3.98-10.687-3.866-14.667 0.254-3.883 4.02-3.883 10.394 0 14.412l15.559 15.559c4.051 4.049 10.616 4.049 14.667 0l46.675-46.675c3.98-4.12 3.866-10.688-0.254-14.667z"/>
    </svg> 
  </div>
  Your Orders
</button>

最佳答案

+ 是 CSS 兄弟选择器。 .icon-svg 不是您按钮的兄弟，它是一个 child 。

同时将 div 放在 button 中是无效的，但大多数浏览器都能正常显示。不过，我在这里将其更改为跨度。

尝试 .box-button:hover .icon-svg 而不是 .box-button:hover+.icon-svg。

.box-button {
  border: 1px solid orange;
  color: orange;
  padding: 15px 0px;
  text-align: center;
  margin: 5px 5px;
  width: 90%;
  font-size: 1.2rem;
}

.box-button:hover {
  background-color: orange;
  color: white;
}

.box-button:hover .icon-svg {
  fill: white !important;
}

.icon-svg {
  fill: orange;
}

<button class="box-button">
  <span class="svg-container">
     <svg class="icon-svg" enable-background="new 0 0 612 792" version="1.1" viewBox="0 0 612 792" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
        <path d="m82.983 432.29c-5.728 0-10.372 4.644-10.372 10.372v41.488c0 5.729 4.644 10.373 10.372 10.373 5.729 0 10.373-4.645 10.373-10.373v-41.488c-1e-3 -5.728-4.645-10.372-10.373-10.372z"/>
        <path d="m124.47 453.03c-5.728 0-10.372 4.645-10.372 10.372v41.489c0 5.728 4.644 10.372 10.372 10.372s10.372-4.645 10.372-10.372v-41.489c0-5.727-4.644-10.372-10.372-10.372z"/>
        <path d="m502.79 508.7c-4.835-3.073-11.244-1.643-14.317 3.191-2.948 4.641-1.765 10.775 2.701 13.984 28.511 19.197 36.06 57.871 16.865 86.381-19.197 28.51-57.871 36.062-86.381 16.865-28.511-19.197-36.062-57.871-16.865-86.381 11.559-17.167 30.896-27.465 51.592-27.476 5.729 0 10.372-4.645 10.372-10.372 0-5.729-4.644-10.372-10.372-10.372-45.827 9e-3 -82.972 37.166-82.962 82.993 9e-3 45.827 37.166 82.972 82.993 82.962 45.827-9e-3 82.972-37.166 82.962-82.993-5e-3 -27.583-13.717-53.361-36.588-68.782z"/>
        <path d="m575.96 543.05c-10.049-34.813-34.776-63.516-67.719-78.606v-229.23c1e-3 -3.668-1.936-7.063-5.093-8.93l-228.19-134.84c-3.257-1.925-7.303-1.925-10.559 0l-228.19 134.84c-0.218 0.125-0.374 0.311-0.581 0.456-0.208 0.146-0.404 0.311-0.612 0.477-0.901 0.709-1.675 1.565-2.292 2.531 0 0.072-0.125 0.114-0.166 0.187v0.073c-0.584 1.054-0.981 2.201-1.172 3.392 0 0.311-0.093 0.602-0.125 0.913-0.031 0.312-0.145 0.591-0.145 0.902v269.68c-1e-3 3.668 1.936 7.063 5.093 8.931l228.19 134.84c0.273 0.132 0.553 0.25 0.84 0.353 0.283 0.142 0.574 0.266 0.871 0.373 2.283 0.954 4.853 0.954 7.136 0 0.301-0.107 0.595-0.231 0.882-0.373 0.27-0.124 0.56-0.197 0.83-0.353l61.933-36.604c19.058 66.017 88.022 104.08 154.04 85.027 66.016-19.058 104.08-88.024 85.027-154.04zm-306.28-430.63l53.936 31.874-79.97 47.256c-4.935 2.916-6.572 9.281-3.656 14.215 2.916 4.935 9.28 6.572 14.215 3.656l89.813-53.033 53.936 31.874-207.8 122.76-53.936-31.874 86.888-51.343c4.935-2.916 6.572-9.28 3.656-14.215s-9.281-6.572-14.215-3.656l-96.721 57.161-53.946-31.874 207.8-122.8zm-89.897 216.57v69.256l-53.583-31.667v-69.255l53.583 31.666zm156.23 216.45c-2.76 10.463-4.138 21.242-4.099 32.063 3e-3 4.341 0.23 8.679 0.685 12.996l-52.546 31.065v-33.689c0-5.728-4.644-10.372-10.372-10.372s-10.372 4.645-10.372 10.372v33.689l-207.45-122.58v-245.58l53.594 31.667v87.428c-4e-3 3.672 1.932 7.072 5.093 8.941l74.327 43.927c1.6 0.94 3.423 1.438 5.28 1.441 5.728 0 10.372-4.645 10.372-10.372v-75.188l58.78 34.736v170.4c0 5.729 4.644 10.373 10.372 10.373s10.372-4.645 10.372-10.373v-170.4l187.99-111.09c4.933-2.916 6.567-9.278 3.651-14.21s-9.278-6.567-14.21-3.651l-187.8 110.98-59.122-34.944 207.8-122.8 69.142 40.856v216.05c-66.202-17.46-134.02 22.051-151.48 88.255zm120.37 135.79c-57.284 0-103.72-46.438-103.72-103.72s46.439-103.72 103.72-103.72c57.285 0 103.72 46.438 103.72 103.72-0.063 57.259-46.464 103.66-103.72 103.72z"/>
        <path d="m494.58 549.42c-4.02-3.883-10.394-3.883-14.413 0l-39.342 39.343-8.225-8.226c-4.12-3.98-10.687-3.866-14.667 0.254-3.883 4.02-3.883 10.394 0 14.412l15.559 15.559c4.051 4.049 10.616 4.049 14.667 0l46.675-46.675c3.98-4.12 3.866-10.688-0.254-14.667z"/>
    </svg> 
  </span>
  Your Orders
</button>

关于html - 悬停按钮时如何更改svg颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56435194/

文章推荐： jquery - 单击按钮时动画 marginTop

文章推荐： html - Flex 框在应该是一行时呈现为一列

文章推荐： jquery - 当我调整窗口大小时如何使用滚动

文章推荐： jquery - 如何通过 CSS 或 jQuery 将我的目标

更改为另一个目标

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 悬停按钮时如何更改svg颜色