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

Posted 2023-05-08

【中文标题】悬停按钮时如何更改svg颜色

【英文标题】：how to change svg color when button is hovered

【发布时间】：2019-10-19 11:18:17

【问题描述】：

我正在尝试在按钮悬停时更改 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 Combinators and Selector Lists。

【参考方案1】：

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

同样将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>