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

您可以按以下方式覆盖svg css属性.

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

Answer 2

很抱歉回答了一个非常非常老的帖子。

我认为最好的方法是查看您的<svg>.

例如：

<svg>
    <path>...</path>
</svg>

如您所见，<path>标签由<svg>. 然后你可以<path>在css中用这种方式添加：

svg:hover path { 
    fill: #fce57e;
}

这是工作片段：

<svg>
    <path>...</path>
</svg>

svg:hover path { 
    fill: #fce57e;
}