用JS替换图像src或使用CSS过滤器来操作它更好吗？

Question

我有一个带图标的按钮，其来源是~4kb的SVG。当我将鼠标悬停在按钮上时，我希望图标反转颜色，从黑色变为白色。为了达到这个效果，最好像这样使用CSS：

select * from (select  * from myTable where INITIAL = '01' or FINAL = '01' order by Date) where Rownum=1

...或者更好（例如更快/最佳练习/更好的内存）直接操作图像源并添加图标的白色版本？

#btn:hover #icon-img {
    -webkit-filter: invert(1);
    filter: invert(1); 
}

Answer 1

根据经验，CSS解决方案是基于JS的解决方案的更好方法。

CSS的主要问题（特别是关于新的奇特功能）是支持：

moment.js

正如您所看到的，如果您想支持IE，那么您运气不好（尽管Internet Explorer 4.0到9.0实现了非标准和不推荐使用的过滤器属性）。

正如@ guest271314指出的那样，您的JS解决方案将触发对服务器的新请求......您可以考虑使用精灵或数据URI来避免它。

Answer 2

使用css在每个mouseover活动中不对图片提出额外的网络请求。