2023年更新

您可以使用CSS hue-rotate滤镜来更改图像颜色：

img:hover {
  filter: hue-rotate(180deg);
}

大多数现代浏览器都支持它-参见CanIUse。
此外，您还可以将图像另存为SVG（而不是PNG），并根据需要对SVG的任何部分设置样式。

原始答案（2015年）

如果你的目标是现代浏览器，你可以使用CSS filters。
hue-rotate滤镜适用于改变颜色：

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

确切的度数取决于图像和预期结果。
请注意，CSS过滤器是一个新特性，其浏览器支持是有限的。
或者，您可以使用CSS sprites技术，它适用于所有合理年龄的浏览器。

你需要做的是使用CSS将图像设置为背景图像。然后使用另一个版本的图像（不同颜色）设置悬停状态。例如：

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

根据你放置图像/类的位置，你需要分配合适的高度/宽度（或者使用填充）。

您可以通过事件（如悬停）将图像的颜色更改为另一种颜色的相同图像。
网页：

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

CSS：

#cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
      opacity:0;
    }

详情如下：http://css3.bradshawenterprises.com/cfimg/

我也想知道一个简单的方法来做到这一点，如：

.img:hover {
      background: red;
}

或

.img:hover {
      color: red;
}

但是，我发现一些浏览器解决方案使用了SVG图像，这些图像具有fill属性，可以通过CSS轻松设置。
但是，如果使用font-awesome（基本上，它是一种字体，其中的字符不是不同的图标），那么使用简单的CSS属性color就可以很容易地进行控制，如**second示例中所示
所以，如果你想要最简单的解决方案--为你的项目找到与你所使用的相对应的SVG图像。我发现这个过程有点痛苦，于是决定学习如何将png、.jpg和.png转换为.svg。有一个命令行工具可以帮助你做到这一点，它被称为potrace。如果您决定使用此工具，我建议您注意一件事，即使用简单的编辑器对比您想要转换为path的所有内容的dark和white/light（不透明）**颜色到背景和您不想在.svg文件中看到的区域。

申请：

{color:red}

添加到任何元素意味着更改文本颜色。
尝试更改：

img:hover {color:red}

致：

img:hover {background-image: url('<insert url to red arrow here>');}

如果你只有一张图片，这个方法也可以用.如果你有很多图片，而你只想在悬停时改变其中一张，那么就为你想改变的图片设置一个ID，然后把img和img：hover改为#x和#x：hover，并用你给这个ID指定的名字替换x.
下面是一个例子（假设其他HTML是完整的和正确的格式）：

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">

理解这是一个老职位，但我发现应用的方法理查德采取的工作，但增加0px的高度和宽度，然后调整边距和填充工作。

.share-icon img {
  background-image: url(../../../images/share-blk.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}

.share-icon:hover img {
  background-image: url(../../../images/share-pur.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 0px;
  width: 0px;
  padding: 10px;
  margin: 1px;
}