How to change color of png on hover?

Question

I made a "down arrow" in illustrator and saved it as a png with a transparent background. When I put it into my webpage as an img, it shows up in the original color, which is okay. I'm trying to do

  img:hover{color:red;}

and it doesn't work.

Does anyone know how to make it work?

Thanks

Answer 1

If you target modern browsers, you may use CSS filters.

The hue-rotate filter is suitable for changing colors:

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

The exact amount of degrees depends on your image and expected results.

Note that CSS filters is a new feature, and its browser support is limited.

---

Alternatively, you may use CSS sprites technique, which works in all browsers of reasonable age.