如何在悬停时不更改链接的颜色答案

【问题标题】：How to not change color of link on hover如何在悬停时不更改链接的颜色
【发布时间】：2014-03-19 23:12:24
【问题描述】：

我在 MVC5 应用程序中使用 metro-ui-css 并有一个菜单。现在我根本不想更改菜单链接的颜色。菜单导航栏如下所示：

 <nav class="navigation-bar-content">
            <a href="@Url.Action("Index", "Home")"><item class="element">A Thousand Counts</item></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

同时添加以下css：

.element > a, a:active, a:hover, a:link, a:visited {
    color: white;
}

我设法将链接的颜色保持为我想要的白色。不幸的是，悬停时它仍然变成蓝色。我怎样才能改变这种行为并保持白色？我试过了：

a:hover {
    color: white;
}

但它不起作用。如果有 CSS 技能的人能帮助我，我将不胜感激！

【问题讨论】：

在您的 CSS 定义中，可能会有其他更具体的样式获得更高的优先级，从而覆盖您定义的样式。

标签： html css asp.net-mvc microsoft-metro

【解决方案1】：

在您的 CSS 定义中，可能会有其他更具体的样式获得更高的优先级，从而覆盖您定义的样式。

根据您发布的 HTML，这很可能会为您完成这项工作：

.navigation-bar-content a:hover {
    color: white;
}

【讨论】：

【解决方案2】：

Arbel 的小费很棒！如果您在这些类型的问题上陷入困境并且找不到罪魁祸首，有时这些解决方法会有所帮助：

<nav class="navigation-bar-content">
    <a href="@Url.Action("Index", "Home")"><item class="element"><span class="workaround">A Thousand Counts</p></span></a>
            <item class="element-divider"></item>
            <item class="element">...</item>
        </nav>

.workaround > a, a:active, a:hover, a:link, a:visited {
    color: red;
}

【讨论】：

【解决方案3】：

感谢Arbel 的评论，问题解决了。通过添加 !important:

.element > a, a:active, a:hover, a:link, a:visited {
    color: white!important;
}

菜单保持白色。太好了！

【讨论】：

虽然这可行，但我建议尽可能不要使用 !important。请参阅我的回答，了解避免使用 !important 解决问题的可能解决方案。