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

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

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

.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>

解决方法

因此，您将鼠标悬停在父级上，但想更改子级的属性。因此，您需要将悬浮效果设置为父级，然后将更改写入子级。

赞：

.icon:hover svg{
  fill: white;
}

.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;
}

.icon:hover svg {
  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>

,

https://yqnn.github.io/svg-path-editor/的简化路径

def acronym(update,context):
command = "".join(context.args)
acronyms = [
    "text one","text two"
]
if command == "2B":
    answer = acronyms[0]
else:
    answer = acronyms[1]
update.message.reply_text(answer,parse_mode=ParseMode.MARKDOWN_V2)

button{
 width:4em;
}
button,svg{
  display:inline-block;
  vertical-align:middle;
}
button:hover{
  background:green;
  stroke:black;
  stroke-width:5;
  fill:gold;
}