html - 图片在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);
}

演示。

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

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

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

在你问之前谷歌。