html - 在悬停时使 svg 图标颜色

Question

我是 svg 图标的新手，我只需要在悬停时更改此图标的颜色。

这是我目前所拥有的:jsfiddle.net

.search-social :hover .search-icon {
    fill: #72dcff;
}

正如您所见，它只是从 fiddle 开始工作，因为我对它们都应用了.search-social。

但是这个解决方案是干净的还是您建议更好的解决方案？

Answer 1

https://jsfiddle.net/e1491y39/4/

我认为这是因为您有笔触和填充以及单独的部分。因此，如果您将其设为单一路径，则可以只使用该单一路径。否则，您可以在 SVG 本身上使用悬停。 (参见 jsFiddle。)

.