How can I change the color of an icon and text at the same time when hovering over with mouse

Question

I've created 3 icons with text under, you can see the code here http://cssdeck.com/labs/qrpf4z9g

The problem is that if you hover your mouse over an icon, only the icon gets red and the text stays grey, but if you hover over the text first then both icon and text gets red.

my goal is to make the text and the icon red at the same time no matter where you hover first and i can't figure out how.

I'm new to HTML/CSS

Answer 1

Change this:

.righticons a span:hover

To this:

.righticons a:hover span

Also, I noticed that upon first hovering each that there is a slight "flash" before showing the red icon. This happens because the icon needs to load its new image - you might consider creating a sprite (at least for each icon) and adjusting only the background-position property upon hovering. This will eliminate the flash.