html - CSS - 悬停时更改填充颜色 - SVG 路径

Question

我在我的元素中使用 svg 路径使用现代 ui 图标包。

我尝试做的是更改悬停时的填充颜色。

但是我没有成功..

希望有人能帮我解决这个问题。

提前致谢。

代码:

<div id="Main">
   <ul>
      <li>
          <form>
             <button>
                <div class="inner">
                   <svg>
                     <path d="M35.......etc..">
                     </path>
                   </svg>
                </div>
             </button>
          </form>
      </li>
   </ul>
</div

Answer 1

您可以像下面这样通过 css 覆盖 svg 填充颜色，也可以针对不同的元素，例如 <path> polygon circle等

#Main svg:hover {
    fill: #fce57e;
}

#Main svg:hover path {
    fill: #fce57e;
}

#Main svg:hover plygon {
    fill: #fce57e;
}

#Main svg:hover circle {
    fill: #fce57e;
}