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

What you need to do is set the image as a background-image using CSS. Then set a hover state using another version of the image (with a different colour). For example:

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

Depending where you're putting the image/class, you'll need to assign appropriate height/width (or using padding).