How to make multiple spans in the same word hover together?

I'm very new to html and css, but I'm trying my best. I have the word Google in a table row that has every letter in the word colored a different color, like the Google logo actually is. To do this, the only way I could think of was to `span` each letter a different color. That's all fine and good. What I would like to do is make it so that when you hover over the word Google, it changes to the specified hover color. The code I have works to do that, but it does it to each letter individually, because of the `span`s. I would like that when the word Google is hovered over, the entire word changes color and not just the individual letter that is being hovered over. Is there a way to connect all the `span`s so they act as one, or is there a better way of going about having different colors for each letter in the word Google? Here is my relevant html code: ``` <td style="width: 100px; text-align: center; font-weight: bold; background: #88FAF8; border-color: black; letter-spacing: -2px"> <a href="https://www.google.com/" style="text-decoration: none"> <span style="color: blue">G</span> <span style="color: red">o</span> <span style="color: yellow">o</span> <span style="color: blue">g</span> <span style="color: green">l</span> <span style="color: red">e</span> </a> </td> ``` and here is my relevant CSS code: ``` td:hover {background: #000000 !important;} a:hover {color: #2BFBFB !important;} span:hover {color: #2BFBFB !important;} ``` The `a:hover` is for other cells that don't have the span code in them. the `span:hover` is for the Google cell because `a:hover` doesn't work on it due to the `span`s, but like I've said, it doesn't work exactly like I would like it to. Forgive me if my posting isn't formatted exactly right. This is my first post. I'll get it right. Here's my code in action at JSFiddle: http://jsfiddle.net/Sharkie405/36aT7/