当我将鼠标悬停在SVG按钮上时，它没有改变颜色

编程问答 2022-08-16

问题描述

我有一个内部带有SVG的按钮，在我的CSS中，当您将鼠标悬停在其上时，图标会更改颜色，与SVG相同。但是我必须将鼠标直接放在SVG上以填充颜色，这是SVG的新手，因此，如果有人可以帮忙，请把屏幕截图和使用的代码放进去。

enter image description here

.icon {
  cursor: pointer;
  display: flex;
  border: 1px solid rgb(187,187,187);
  justify-content: center;
  align-items: center;
  width: 47px;
  box-shadow: 0 0px 0px 0 rgba(172,170,0.2),0 2px 2px 0 rgba(0,0.1);
  border-radius: 1px 3px 3px 1px;
  height: 41px;
  outline: none;
  background-color: #ffffff;
  border-left: none;
}

.icon:hover {
  background-color: #5b9e4d;
  box-shadow: 0 2px 4px 0 rgba(172,0.1);
  border: none;
}

.icon:active {
  background-color: #5b9e4d;
  outline: none;
}

svg:hover {
  fill: white;
}

svg {
  fill: #aaaaaa;
  text-align: center;
  right: 5px;
  cursor: pointer;
  height: 33px;
  min-width: 2px;
  margin-left: 3px;
  margin-bottom: 0px;
  width: 20px;
}
<button type="submit" class="icon searchIcon">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,72.564c20.039,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,122.853,35.483c127.318,230.9-103.582,230.9-230.9S408.42,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,410.489z"/>
      </g>
    </g>
  </svg>
</button>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

buttonbuttonhoverhtmlsvg