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

No correct solution

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top