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

【问题标题】：picture change colour on hover in html图片在html中悬停时改变颜色
【发布时间】：2014-05-02 19:37:38
【问题描述】：

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

【问题讨论】：

你知道 CSS 吗？这可能对你有帮助
到目前为止你的代码在哪里？你试过什么？你在哪里卡住了？

【解决方案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.

【讨论】：

谢谢，这就是我所追求的