图片在html中悬停时改变颜色

Question

当我将鼠标悬停在html上时，如何让图片更改颜色？我正在考虑使用带有颜色的单独图片作为悬停，但我究竟会怎么写呢？

Answer 1

<强> HTML：

<img class="myPic" src="http://emjaywebdesigns.com/wp-content/uploads/2011/07/web_binary-300x237.jpg" />

<强> CSS：

img.myPic {
    filter: none;
    -webkit-filter: grayscale(0);
}

img.myPic:hover {
    filter: url(filters.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

DEMO.

或者你可以在悬停时使用不同的图像，即

.myPic {
    background:url('path/to/image/image_normal.png') no-repeat;
}

.myPic:hover {
    background:url('path/to/image/image_hovered.png') no-repeat
}

Google before you ask.