CSS subnav文本悬停颜色不起作用答案

【问题标题】：CSS subnav text hover color not workingCSS subnav文本悬停颜色不起作用
【发布时间】：2013-12-30 04:11:11
【问题描述】：

当您将鼠标悬停在子导航菜单文本上时，我无法让其更改颜色。我正在尝试构建的是具有子导航的导航菜单。子导航链接的悬停状态会更改背景颜色和文本颜色。我无法让它工作，目前只有翻转时的背景发生变化，而不是文本。

以下是导航示例的链接： http://confinedfoodie.com/test/contact.html 子导航可以在“我们做什么”的“视频帖子”下找到。

这是 HTML：

<nav id="primary-nav"><!-- Navigation -->
          <ul>

    <li><a href="#nowhere">WHAT WE DO</a><!-- what we do -->
                <ul><!-- hidden links level 1 -->
                    <li><a href="radio-production.html">Radio Production</a></li>
                    <li><a href="voice-casting.html">Voice Casting</a></li>
                    <li><a href="#nowhere">Video Post</a><!-- video post -->
                        <ul style="width:170px;"><!-- hidden links level 2 -->
                            <li ><a href="mix-to-picture.html">Mix to Picture</a></li>
                            <li><a href="adr-film-tv.html">ADR for Film & TV</a></li>
                        </ul><!-- End hidden links level 2 -->
                    </li><!-- END video post -->
                    <li><a href="isdn-services.html">ISDN Services</a></li>
                    <li><a href="pharma.html">Pharmaceutical</a></li>
                    <li><a href="audio-books.html">Audio Books</a></li>               
                  </ul><!-- End hidden links level 1 -->
            </li><!-- END what we do -->
          </ul>             
        </nav><!-- /Navigation  -->

这是 CSS：

nav ul ul li a {
padding: 5px 10px;
color: #c8c8c8;
}   
nav ul ul li a:hover {
    color: #fff; 
    background: #2b191c;
}

感谢您的帮助，提前感谢您。

【问题讨论】：

标签： html css navigation nav

【解决方案1】：

样式优先级有点问题。

你已经设置了这个样式选择器，我假设涵盖了所有其他链接：

nav ul li:hover a

由于您的第二个无序列表位于第一个无序列表的 <li> 内，因此它的元素也继承了这种样式。

之后，你还得到了：

li:hover a

这更广泛，并且再次与您想要的风格重叠。

这两个声明优先，因为它们位于单独的样式表中，该样式表在具有您更具体样式的样式表之后加载。

您有两个选择，最好是重新优化所有样式，以减少重叠，减少样式相互冲突的机会。这意味着创建更少、更具体的样式，从而更有效地覆盖您的网站。使用 > 选择器的 nav ul li:hover > a 之类的东西可能很有用。

或者，您可以尝试移动样式，以便按顺序给出适当的优先级。（我没有检查以确保顺序是否是唯一的影响因素，因此如果简单地移动样式不起作用，您可能需要重新优化）

【讨论】：

作为一个附加提示，您可能需要分析拥有这么多单独样式表的原因。有时为组织目的创建不同的文件很有用，但它经常会导致样式问题优先级，并且它可能使追查问题变得更加困难。如果你发现你真的不需要单独的文件，那么使用单个样式表可能是值得的。
布莱克·曼恩，我尝试了你的建议并且成功了。谢谢！

【解决方案2】：

您的项目在我使用您拥有的确切代码制作的这个 JSFiddle 中运行良好。我认为您的问题是您可能没有将 css 文件链接到您的 HTML。这是一个例子：

http://jsfiddle.net/ym2cL/

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

http://www.w3schools.com/css/css_howto.asp

【讨论】：