使用CSS

Question

我的网站上有一个标签式导航系统，我正在遇到一个样式问题，第一次，我们有一组带有浅色文本的深色选项卡和一个带有浅色背景和深色文本的突出显示选项

当鼠标在标签上移动时，我一直试图让所选标签的文本上的颜色发生变化，而不仅仅是-a href-文本。它功能正常。我能够更改标签文本颜色，默认选择的标签正确，但是当从标签移动到标签时，功能开始分崩离析。

选项卡颜色正确跟随鼠标。当鼠标在文本上移动时，标签文本会正确显示，但我要找的是当鼠标在标签上移动时文本颜色会发生变化。

我能够使用<a>元素上的填充来完成我所需的大部分功能，但这很笨重，需要我在每个选项卡上调整填充，以避免将鼠标悬停在链接上时文本移动，以及移动文本时，它似乎才真正起作用，而不是在移动文本时。下面是我的CSS的片段，它影响了第一个选项卡上的选项卡 - 以及第二个选项中的文本 - 。

                #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;
                        }

我通过看似相关的this article阅读，但我宁愿使用CSS来完成此操作，而不是加载一组额外的javascript命令或其他jquery插件......如果有办法的话。我想我只是缺少一些东西。

提前致谢。