CSS 悬停时更改PNG图像的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5449430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Color of PNG Image on hover?
提问by Eddie
I added these icons http://grab.by/9HYWto my site and wanted to change the color on hover...what is the best solution?
我将这些图标http://grab.by/9HYW添加到我的网站，并希望在悬停时更改颜色...最好的解决方案是什么？
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
图标为 png 格式，希望在悬停时更改为蓝色...提前致谢。
回答by bluefoot
回答by biggles
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
您可以使用 css sprite（可以说是最干净和最跨浏览器的可比方式），其中您基本上在一个图像中同时具有常规和悬停状态，并在悬停时更改 div 的背景位置。（xpixelz 链接应该可以帮助您。）
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
如果图像实际打印在页面上，您可以使用 javascript 在悬停时以悬停状态滑动图像。
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
我不确定它们是如何显示在页面上的，但是如果它们在纯色背景上，您可以制作一个负空间的 png 并将其放置在图像的确切宽度和高度的 div 中，然后只需更改悬停时 div 的背景颜色，因为实际徽标是透明的，您将看到父 div 的背景颜色。
回答by srinivas
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
如果您使用平面 png 图标，那么您可以使用 jFlat jquery 插件。记住它只支持支持 HTML5 的浏览器
回答by amized
as you may opt for CSS sprites http://css-tricks.com/css-sprites/google for "css sprites generator" if you need a quick way ;)
因为你可以选择 CSS sprites http://css-tricks.com/css-sprites/如果你需要一个快速的方法，谷歌搜索“css sprites generator”;)
