Add Hover State to Logo?

Is it possible to have a hover state for a logo in the header? 

My logo says the word "apple", and I want when the mouse hovers over it to swap out for an icon of an apple. 

Additionally would it be possible to do this for multiple elements in a single logo? i.e. if there was 3 words and hovering over each word would change its state?

At the moment I'm just using an animated gif which is fine, just not as clean as I'd like.

Thanks!!

I don't have all the answers, but I think it starts something like this, but I'm missing the middle piece for swapping the logo image with another image.  @tuanphan can you help?

//Logo Rollover//
.logo img:hover {

}