<li> rollover + text

Question

I have a menu with tiled images w/text under them. See Fiddle:

http://jsfiddle.net/techydude/GF8tS/

Is there a way I can rollover the box and have the text also activate its hover state, and vice versa?

Answer 1

Yes.

Instead of using :hover on the actual elements, apply it through their common parent, the li.

So use

li:hover .rounded instead of .rounded:hover

and

li:hover .tileText instead of .tileText:hover

demo at http://jsfiddle.net/gaby/DwT8K/1/