Changing text color on nested element using CSS

Question

I have a tabbed navigation system on my site and I am running across a styling issue where, for the first time, we have both a dark set of tabs with light text and a highlighted selection that has a light background and dark text.

I have been attempting to get the color to change on the text of the selected tab when the mouse move over the tab, not just the -a href- text. It is functionally working. I am able to get the tab text color to change, the default selected tab is colored correctly as, well, but when moving from tab to tab functionlity begins to fall apart a bit.

Tab color follows the mouse correctly. Tab text follows correctly as the mouse flows over the text, but what I am looking for is to have the text color change when the mouse moves over a tab.

I was able to accomplish most of my desired functionality using padding on the <a> element, but that is clunky and would require me to adjust padding on every individual tab to avoid text movement when hovering over the link, and it only seems to really work when moving off the text, not when moving toward the text. Below is a snippet of my css that effect the tabs -li- on entry one, and the text -a- on entry two.

                #tabHeadings li.selected, #tabHeadings li:hover {
                position: relative;
                margin-bottom: -2px;
                text-decoration: none;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px; 
                border: 1px solid #777;
                margin-right: -2px;
                text-shadow: 0 1px 1px black;   
                -webkit-transition: background .2s;
                -moz-transition: background .2s;
                -o-transition: background .2s;
                transition: background .2s;
                background-color: #3b5382;
                background: -webkit-gradient(
                            linear,
                            left top, left bottom,
                            from(#3b5382),
                            to(#273757)         
                            );

                background: 
                            -moz-linear-gradient(
                            top,
                            #3b5382,
                            #273757
                            );

                background: 
                            linear-gradient(
                            top,
                            #3b5382,
                            #273757
                            );

            }

            #tabHeadings li.selected a, #tabHeadings li:hover a:hover {
                            color: black;
                        }

I read through this article that seems related, but I'd rather use CSS to accomplish this rather than loading an additional set of javascript commands or another jquery plugin... if there is a way. I think I am just missing something.

Thanks in advance.