Animate single element on background

Question

What would be the most efficient way to change the walk signals on the header image on http://www.danielLmusic.com from red to green. I would think there'd be a more efficient way to do it than to change backgrounds since i'm only changing a small percentage of it. Any help for my newbie self would be most appreciated.Also, it's a wordpress site if that makes any difference.

Thank you in advance!

Answer 1

Recreated the background image so that the signals are TRANSPARENT, you'll need to use a PNG or GIF. Use background-color CSS property to change the color, leaving the background-image untouched.

.bg {
    background-color: red;
    background-image: url('...');
}
.bg:hover {
    background-color: green;
}