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

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.