css - 使用反色以简单的方式复制社交图标

Question

我正在制作一个响应式网站，顶部有导航社交图标，我想将每个图标悬停成另一种颜色。在 photoshop 中编辑期间，我不知道使用什么技术可以轻松地添加颜色。问题是图标很小，所以在设置颜色时需要时间。我的网站上有 5 个图标:google、facebook、twitter、pinterest 和 rss。

Answer 1

您需要使用 css :hover 选择器更改图标。

尝试这样的事情:

HTML

<a class="icon" href="#"></a>

CSS

a{
  background-image: 'image.png'
  width: 32px;
}

a:hover {
 background-image: 'hover-image.png'
}